首先,创建一个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定义垂直方向的元素位置