Flexbox实现垂直水平居中

首先，创建一个div容器，容器内是需要居中的内容

<div class="container">
    <!--容器内的元素将会居中-->
    <img src="fireworks.jpg" alt="fireworks">
</div>

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

1.设置container的display的类型为flex，激活为flexbox模式。

2.justify-content定义水平方向的元素位置

3.align-items定义垂直方向的元素位置