css实现水平垂直居中的方法

本文主要针对子元素已知宽高和未知宽高的情况下，对其进行水平垂直居中

  本文假设对如下元素进行水平垂直居中方式（父元素和子元素）：

<div class="parent">
    <div class="children size"></div>
</div>

首先给他们加一个公共使用的样式（本文介绍的方法有定宽和不定宽的，所以size用来表示children的宽高）

.parent {
   border: 1px solid red;
   width: 600px;
   height: 600px;
}
.children {
    background: green;    
}
.children .zise {
    width: 200px;
    height: 200px;
}

子元素相对父元素进行绝对定位，左和上边距为50%，此时子元素左上顶点在元素的正中间，只需要让子元素的中心点在父元素正中间即可：

1. absolute + 负margin

.parent {
    position: relative;
}
.children {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

• 次方法兼容性较好，只是只适用于必须知道子元素的宽高

2. absolute + margin auto

通过设置各个方向距离都是0，然后再将margin设为auto

.parent {
    position: relative;
}
.children {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

• 兼容性好，可是需要知道子元素的宽高

absolute + calc

calc()属于CSS3，用于动态计算长度值。

.parent {
    position: relative;
}
.children {
    position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
}

• 此方法属于css3，属于依赖于需要支持该语法才可以，且需要知道子元素宽高

以下方法都是子元素未知的情况：

4. absolute + transform 移动

使用css3新属性transform的translate, 其属性的百分比是相对于自身的宽和高进行移动。

.parent {
    position: relative;
}
.children {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

在一些浏览器中可能会出现模糊，是因为元素有可能被放置在办个像素的位置上，可通过以下方法解决此问题：
transform-style: preserve-3d;

• 此方法需要依赖translate2d的兼容性，且不需要知道子元素宽高

5. line-height 属性

利用行内元素的属性实现居中：

.parent {
    line-height: 600px;
    text-align: center;
}
.children {
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
}

• 此时子元素文字居中显示text-align: left; /* 修正文字 */

6. writing-mode

writing-mode可以改变文字的显示方向,比如可以通过writing-mode让文字的显示变为垂直方向:

<div class="div1">水平方向</div>
<div class="div2">垂直方向</div>
.div2 {
    writing-mode: vertical-lr;
}

这样可以改变文字的显示方向
具体实现方式如下：

<div class="wp">
    <div class="wp-inner">
        <div class="box"></div>
    </div>
</div>

.wp {
    writing-mode: vertical-lr;
    text-align: center;
}
.wp-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.box {
    display: inline-block;
    margin: auto;
    text-align: left;
}

7. table

tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了,table会增加代码的冗余性：

<table>
    <tbody>
        <tr>
            <td class="parent">
                <div class="children">子元素-表格</div>
            </td>
        </tr>
    </tbody>
</table>

.parent {
        text-align: center;
    }
.children {
    display: inline-block;
}

• 这种方法就是代码太冗余，而且也不是table的正确用法

8. css-table

css新增的table属性，可以让我们把普通元素，变为table元素的现实效果，通过这个特性也可以实现水平垂直居中：

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

9. flex

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

• 移动端已完全支持flex，PC端需要看浏览器的兼容性

10. grid

css新出的网格布局，但是兼容性不好

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

• 该方法兼容性不如flex

总结：

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

注：本文主要参考此篇文章CSS实现水平垂直居中的1010种方式（史上最全）