css如何实现水平垂直居中

方法	居中元素定宽高固定	PC兼容性	移动端兼容性
absolute + 负margin	是	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
absolute + margin auto	是	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
absolute + calc	是	ie9+, chrome19+, firefox4+	安卓4.4+, iOS6+
absolute + transform	否	ie9+, chrome4+, firefox3.5+	安卓3+, iOS6+
writing-mode	否	ie6+, chrome4+, firefox3.5+	安卓2.3+, iOS5.1+
lineheight	否	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
table	否	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
css-table	否	ie8+, chrome4+, firefox2+	安卓2.3+, iOS6+
flex	否	ie10+, chrome4+, firefox2+	安卓2.3+, iOS6+
grid	否	ie10+, chrome57+, firefox52+	安卓6+, iOS10.3+

后面不在重复这段公共代码：

【HTML 代码】:

 <div class="wp">
     <div class="box">123123</div>
 </div>

【CSS 代码】;

 /* 公共代码 */
 .wp {
     border: 1px solid red;
     width: 300px;
     height: 300px;
 }

 .box {
     background: green;
 }

 .box.size{
     width: 100px;
     height: 100px;
 }
 /* 公共代码 */

+++++++++ 固定高度宽度 添加类size++++++++++++++++++

子元素的html：    <div class="box size">123123</div>

absolute + 负marginsize

 /* 此处引用上面的公共代码 */
 /* 此处引用上面的公共代码 */

 /* 定位代码 */
 .wp {
     position: relative;
 }
 .box {
     position: absolute;;
     top: 50%;
     left: 50%;
     margin-left: -50px;
     margin-top: -50px;
 }

absolute + margin auto

 /* 此处引用上面的公共代码 */
 /* 此处引用上面的公共代码 */

 /* 定位代码 */
 .wp {
     position: relative;
 }
 .box {
     position: absolute;;
     top:;
     left:;
     right:;
     bottom:;
     margin: auto;
 }

absolute + calc

 /* 此处引用上面的公共代码 */
 /* 此处引用上面的公共代码 */

 /* 定位代码 */
 .wp {
     position: relative;
 }
 .box {
     position: absolute;;
     top: calc(50% - 50px);
     left: calc(50% - 50px);
 }

++++++++ 不固定高度宽度 移除css类size +++++++++++++++++

absolute + transform

 /* 此处引用上面的公共代码 */
 /* 此处引用上面的公共代码 */

 /* 定位代码 */
 .wp {
     position: relative;
 }
 .box {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

lineheight

 /* 此处引用上面的公共代码 */
 /* 此处引用上面的公共代码 */

 /* 定位代码 */
 .wp {
     line-height: 300px;
     text-align: center;
     font-size: 0px;
 }
 .box {
     font-size: 16px;
     display: inline-block;
     vertical-align: middle;
     line-height: initial;
     text-align: left; /* 修正文字 */
 }

css-table

 .wp {
     display: table-cell;
     text-align: center;
     vertical-align: middle;
 }
 .box {
     display: inline-block;
 }

flex

 .wp {
     display: flex;
     justify-content: center;
     align-items: center;
 }

grid

 .wp {
     display: grid;
 }
 .box {
     align-self: center;
     justify-self: center;
 }

总结

---

下面对比下各个方式的优缺点，肯定又双叒叕该有同学说回字的写法了，简单总结下

• PC端有兼容性要求，宽高固定，推荐absolute + 负margin
• PC端有兼容要求，宽高不固定，推荐css-table
• PC端无兼容性要求，推荐flex
• 移动端推荐使用flex