方法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%)
    /* 省略部分代码 */
}

当前效果：

方法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;
    /* 省略部分代码 */
}

当前效果：

方法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：常用于实现文字的水平垂直居中。

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