记录块级元素实现水平垂直居中的方法，效果如图。

<div class="parent"><div class="child">居中元素</div>
</div><style>
.parent {position: relative;width: 600px;height: 300px;background-color: #679389;
}
.child {width: 300px;height: 120px;background-color: #d8a7a0;text-align: center;line-height: 120px;
}
</style>

方法1：flex布局。给parent设置center_1。

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

方法2：grid布局。设置一个3x3的网格，将子元素放在中间个字中。给parent设置center_2，给child设置center_2--child

.center_2 {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);
}
.center_2--child {grid-row-start: 2;grid-column-start: 2;
}

方法3：absolute+margin矫正偏移。给child设置center_3，此时margin矫正的位置分别是宽高的一半，因此需要知道子元素的宽高。

.center_3 {position: absolute;top: 50%;left: 50%;margin-top: -60px;margin-left: -150px;
}

方法4：absolute+transfom矫正偏移。给child设置center_3。

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

方法5：display: table-cell。给parent设置center_5，此时如果子元素为块级元素，text-align不会生效，可以给子元素child设置display: inline-block。

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