CSS实现水平垂直居中

方法1：position + transform

先设置一个父元素和一个子元素

<div class="father">
    <div class="child"></div>
</div>

给父元素添加相对定位

.father {
    position: relative; 
    /* 省略部分代码 */
}

给子元素添加绝对定位

.child {
    position: absolute;
    /* 省略部分代码 */
}

让子元素相对父元素的宽高进行偏移

.child {
    position: absolute;
    top: 50%;   /* 从上向下偏移父元素高度的50% */
    left: 50%;  /* 从左向右偏移父元素宽度的50% */
    /* 省略部分代码 */
}

当前效果：

从效果上看，子盒子并不是想象上的水平垂直居中。这是因为 top 和 left 是根据子盒子左上角进行偏移的，因此需要用 transform 让子盒子根据自身位置再次进行平移

.child {
    position: absolute;
    top: 50%;   /* 向下偏移父元素高度的50% */
    left: 50%;  /* 向右偏移父元素宽度的50% */
    transform: translate(-50%, -50%)
    /* 省略部分代码 */
}

当前效果：

 

translate() 中的两个参数分别是相对于自身的高和宽进行 x 轴、y 轴平移。这两个参数也可以是具体的像素值，但推荐使用百分比，因为这样可以应对盒子大小会发生变化的情况，不管盒子的大小如何变化，盒子始终能保持水平垂直居中。

方法2：display：flex;

flex 布局也被称为弹性布局，可以非常灵活的对元素进行流式布局

先设置一个父元素和一个子元素

<div class="father">
    <div class="child"></div>
</div>

设置父元素的 display 属性值为：flex ，并且设置 justify-content 的属性值为：center

.father {
    display: flex;
    justify-content: center;    /* 实现子元素在父元素中的水平居中 */
    /* 省略部分代码 */
}

当前效果：

设置 align-items 的属性值为：center

.father {
    display: flex;
    justify-content: center;    /* 实现子元素在父元素中的水平居中 */
    align-items: center;        /* 实现子元素在父元素中的垂直居中 */
    /* 省略部分代码 */
}

当前效果：

采用这种方式，可以实现多个子元素水平垂直居中排列，我们给父元素添加几个子元素看看效果

<div class="father">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

当前效果：

 通过添加 flex-direction: column; 还可以实现子元素纵向排列

.father {
    display: flex;
    justify-content: center;    /* 实现子元素在父元素中的水平居中 */
    align-items: center;        /* 实现子元素在父元素中的垂直居中 */
    flex-direction: column;
    /* 省略部分代码 */
}

当前效果：

flex 布局的优点不限于此，如果想要深入了解，请查阅其他文档！

方法3： text-align + line-height

在父元素中写一句话

<div class="father">
    I like front end design!
</div>

给父元素添加 text-align 和 line-height 属性

.father {
    /* 省略部分代码 */
    height: 200px;          /* 父元素的高度 */
    text-align: center;     /* 子元素水平居中对齐 */
    line-height: 200px;     /* 设置子元素的行高 */
}

当前效果：

行高包括上行高，文字高度和下行高，因此只要使子元素的行高等于父元素的高度即可实现文字垂直居中的效果。

总结

方法1：适合子元素不规则排列的情况。

方法2：适合子元素规则排列的情况。

方法3：常用于实现文字的水平垂直居中。

之后遇到新的方法会来补充。