css居中是布局中常见的方法，现将常用方法总结如下：
1.水平居中
1.1.使用inline-block + text-align
(1)原理：先将子元素由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中
水平布局1.png
(3)优缺点
- 优点:兼容性好，甚至可以兼容ie6、ie7
- 缺点:child里的文字也会水平居中，可以在.child添加text-align:left;
1.2使用table+margin
(1)原理：先将子元素设置为块级表格来显示（类似 <table>），再设置子元素居中以达到水平居中。
水平布局2.png
(3)优缺点：
- 优点：只设置了child，ie8以上都支持
- 缺点：不支持ie6、ie7,将div换成table
1.3使用absolute+transform
(1)原理：将子元素设置为绝对定位，移动子元素，使子元素左侧距离父元素左侧边框的距离为父元素宽度的一半，再通过向左移动子元素的一半宽度以达到水平居中。当然，在此之前，我们需要设置父元素为相对定位，使父元素成为子元素的相元素。
(2)用法：对父框设置position:relative，对子框设置position:absolute，left:50%，transform:translateX(-50%)
水平布局3.png
(3)优缺点：
- 优点:居中元素不会对其他的产生影响
- 缺点:transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀
1.4使用flex+justify-content
(1)原理：通过CSS3中的flex中的justify-content属性来达到水平居中
(2)用法：先将父框设置为display:flex，再设置justify-content:center
水平布局4.png
(3)优缺点
- 优点:设置parent即可
- 缺点:低版本浏览器(ie6 ie7 ie8)不支持
2.垂直居中
2.1使用table-cell+vertical-align
(1)原理：通过将父框转化为一个表格单元格显示（类似 <td> 和 <th>），再通过设置属性，使表格单元格内容垂直居中以达到垂直居中。
(2)用法：先将父框设置为display:table-cell，再设置vertical-align:middle。
垂直居中1.png
(3)优缺点
- 优点:兼容性较好，ie8以上均支持
2.2使用absolute+transform
(1)原理：类似于水平居中时的absolute+transform原理。将子元素设置为绝对定位，移动子元素，使子元素上边距离相对框上边边框的距离为相对框高度的一半，再通过向上移动子框的一半高度以达到垂直居中。当然，在此之前，我们需要设置父元素为相对定位，使父元素成为子元素的相对元素。
(2)用法：先将父元素设置为position:relative，再设置子元素position:absolute,top:50%,transform:translateY(-50%)
垂直居中2.png
(3)优缺点
- 优点:居中元素不会对其他的产生影响
- 缺点:transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀
2.3使用flex+align-items
(1)原理：通过设置CSS3中的布局利器flex中的属性align-times，使子框垂直居中。
(2)用法：先将父框设置为position:flex，再设置align-items:center。
垂直居中3.png
(3）优缺点
- 优点:只设置parent
- 缺点:兼容性存在一定问题
3.水平垂直居中
3.1使用inline-block+text-align+table-cell+vertical-align
(1)原理：使用inline-block+text-align水平居中，再用table-cell+vertical-align垂直居中，将二者结合起来。详见：水平居中的1）和垂直居中的1）
(2)用法：见水平居中的1）和垂直居中的1）
水平垂直居中.png
(3)优缺点
- 优点:兼容性较好
3.2使用absolute+transform
(1)原理：将水平居中时的absolute+transform和垂直居中时的absolute+transform相结合。详见：水平居中的3）和垂直居中的2）
(2)用法见水平居中的3）和垂直居中的2）
水平垂直居中2.png
(3）优缺点
- 优点:child元素不会对其他元素产生影响
- 缺点:兼容性存在一定问题/strip%7CimageView2/2/w/1240)
3.3使用flex+justify-content+align-items
(1)原理：通过设置CSS3布局利器flex中的justify-content和align-items，从而达到水平垂直居中。详见：水平居中的4）和垂直居中的3）。
(2)见水平居中的4）和垂直居中的3）。
水平垂直居中3.png
(3）优缺点
- 优点:只设置了parent
- 缺点:兼容性存在一定问题
4.总结
居中的方式有很多实现方式，总结一些常用的，欢迎指正
代码地址
网友评论