CSS 基础系列：水平垂直居中方案

比较全面的水平垂直居中方案。水平垂直居中问题大体分为两类，一类目标元素是行内元素，一类目标元素是块级元素(其中，块级元素又包括定宽高和不定宽高）。

1.水平居中方案

1.1 行内元素水平居中
把该行内元素包裹在一个块级父元素中，之后设置父元素:

.parent{
    text-align:center
}

1.2 块级元素水平居中
设置该元素：

div{
    width: 100px;  /* 注意宽度一定要给出 */
    margin: 0 auto; /* auto 是必须的 */
}

1.3 多个块级元素水平居中

• 转换为行内元素。设置目标块级元素 display:inline-block，之后设置父元素：

.parent{
    text-align:center
}

• 利用弹性盒子。设置父元素：

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

2.垂直居中方案

2.1 单行行内元素垂直居中

设置块级父元素：

.parent{
    /* 设置父元素的高度等于行高 */
    height:100px;
    line-height:100px;
}

Tip)：这里的 line-height 最终是通过继承作用在子元素上的，所以也可以直接设置子元素为 line-height:100px。

2.2 多行行内元素垂直居中

设置父元素：

.parent{
    display:table-cell;
    vertical-align:middle;
}

Tip): 注意父元素得有高度，否则默认高度由子元素撑起，就没有垂直居中的说法了。

2.3 已知高度的块级元素垂直居中

设置父元素：

.parent{
    position:relative;
}

设置子块级元素：

div{
    position:absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px;
}

Tip): 原理是绝对定位。top:50% 确保了子元素位于父元素 1/2 分割线以下，margin-top: -50px代表子元素在这个基础上上移自身的一半高度，此时子元素与父元素中线重合，实现垂直居中。

2.4 未知高度的块级元素垂直居中

核心代码与上面一样，不过因为我们不知道子元素高度，也就不知道要在 top:50% 的基础上上移多少距离，因此把 margin-top:-50px 改为 transform: translateY(-50%);

3. 水平垂直居中方案

3.1 已知高度和宽度的元素

• 方法一：

设置父元素：

.parent{
    position: relative;
}

设置目标元素：

div{
    position:absolute;
    width:100px;
    height: 100px;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

Tip):这段代码比较优美和灵活。原理其实是：子元素依然相对于父元素定位，但是由于 top:0 和 bottom:0 无法同时满足，且该元素的 margin 又是自适应，因此最终变成了由上下外边距平分尺寸，从而达到垂直居中。至于水平居中，原理也是一样。

• 方法二：

设置父元素：

.parent{
    position: relative;
}

设置目标元素：

div{
    position:absolute;
    width:100px;
    height: 50px;
    top: 50%;
    left:50%;
    margin-top: -25px;
    margin-left: -50px;
}

Tip)：原理和 2.3 其实一样，只是现在多了一个水平方向的居中。看下图：

3.2 未知高度和宽度的元素

设置父元素：

.parent{
    position: relative;
}

设置目标元素：

div{
    position:absolute;
    width:100px;
    height: 50px;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
}

Tip): 原理和 2.4 一样，不同的是我们现在不知道子元素高度和宽度，也就不知道要在 top:50% 和 left:50% 的基础上再移动多少距离，因此把 margin-top:-25px 和 margin-left:-50px 对应改为 transform: translateY(50%，50%);

3.3 任意元素

• 3.3.1 利用弹性布局一

设置父元素：

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

• 3.3.2 利用弹性布局二

设置父元素：

.parent{
    display: flex;
}

设置子元素：

div{
    margin: auto;
}

• 3.3.3 利用网格布局一

设置父元素：

.parent{
    display: grid;
}

设置子元素：

div{
    justify-self:center;
    align-self:center;
}

• 3.3.4 利用网格布局二

设置父元素：

.parent{
    display: grid;
}

设置子元素：

div{
    margin: auto;
}

• 3.3.5 利用伪元素

设置父元素

.parent {
    font-size: 0;  /* 消除空隙 */
    text-align: center;  /* 实现水平居中*/
    &::before {
        content: "";
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
    }
}

设置子元素

div{
  display: inline-block;
  vertical-align: middle;
}

参考：
https://segmentfault.com/a/1190000003761600
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/92