CSS中几种居中方式

1.水平居中的margin:0 auto;

(用于子元素前提是不受float影响)

   

        ![](img1.jpg)

   

2.水平居中text-align:center;

img的display:block;类似一样在不受float影响下进行,是在父元素上添加效果让它进行水平居中

3.水平垂直居中(一)定位和需要定位的元素的margin减去宽高的一半

这种方法的局限性在于需要知道需要垂直居中的宽高才能实现,经常使用这种方法

4.水平垂直居中(二)定位和margin:auto;

5.水平垂直居中(三)绝对定位和transfrom

7.水平垂直居中(五)flexBox居中这个用了C3新特性flex,非常方便快捷,在移动端使用完美,pc端有兼容性问题,以后会成为主流的

你可能感兴趣的:(CSS中几种居中方式)