水平居中

Posted 2020-06-29 baiyuhong

水平居中：

1：如果需要水平居中的元素为内联元素（inline），则只需要对他的父元素添加text-aligh:center。就可以实现水平居中。

2：如果需要水平居中的元素为常规流中的block元素。则：1）为元素设置高度。2）设置元素的margin：0 auto;

IE6以下需在父元素上设置text-align:center,再给子元素恢复需要的值。

3：如果需要居中的元素为浮动元素，则:1) 为元素设置宽度。2) position设置为relative 3) 浮动方向偏移量设置为50% 4) 浮动方向上的margin设置为元素宽度一半乘以-1;

4:如果需要居中的元素为绝对定位元素：有两种方法：

第一种是：

1）  为元素设置宽度

2）  偏移量设置为50%；

3）  偏移方向外边距设置为元素宽度一半乘以-1；

第二种方法是：

1）  为元素设置宽度

2）  设置左右偏移量都为0；

3）  设置左右外边距为auto；