css水平居中和垂直居中

咱也不说废话直接总结~

css水平居中的方法

1.行级元素水平居中：行级元素水平居中对齐（父元素设置 text-align:center）  

2.  块级元素水平居中对齐（margin: 0 auto）

<div style="width: 100px; height: 100px;border: 1px solid;text-align: center;">

<div style="border: 1px solid green;margin: 0 auto;height: 50px;width: 50px;"> 水平居中</div>

</div>

3.浮动元素居中

父元素与子元素，相对定位，同时向左浮动，父元素，left 50%，子元素left-50%（或者right50%）

垂直居中

1.对行级元素垂直居中（heiht与line-height的值一样）

2.对块级元素垂直居中

           1.父元素高度固定

              1）父元素的height与line-height值相同

              2）需要垂直居中的元素

              vertical-align:middle;// 垂直居中对齐

              display:inline|inline-block 块级元素转行级元素

          2.父元素高度不固定

                父元素的padding-top和padding-bottom一样