元素居中

一、行内元素水平居中

　　text-align: center;

二、行内元素垂直居中

　　height: 40px;line-height: 40px;    让这两个值相等

三、块级元素水平居中

 width: 300px; margin: 0 auto;     可以不设置高度

三、块级元素垂直居中

　　1.固定宽高块级元素垂直居中

　　　　

1 2 3 4 5 6 7 8 9 10 11

div{ width: 200px; height: 100px; line-height: 100px; border: 1px solid #000; text-align: center; position: absolute; left: 50%; top: 50%;         margin-left: -100px; margin-top: -50px;     }

　　2.宽高是百分比的块级元素垂直居中

　　　　

1 2 3 4 5 6 7 8 9

div{        width: 10%; height: 30%; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto;   <br>}

　　3.宽高不固定的块级元素垂直居中

　　　　

1 2 3 4 5 6 7 8 9 10 11 12

div{        transform: translate(-50%,-50%);/*此时的百分数是以自身的宽高为参考*/ /*width: 1500px;   height: 300px;*/   /*width: 300px;*/   width: 30%;   height: auto;