css 如何设置页面居中

在编写网页的过程中，很多时候需要将页面中的元素居中展示，比如页面的标题，图片，文本内容等等。那么在CSS中，我们该如何设置页面居中呢？

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

上述代码即可实现页面的居中，接下来我们来逐个解释下：

• display: flex;

• flex布局是一种弹性盒子模型，通过弹性盒子模型可以轻松控制元素的布局。

• justify-content: center;

• align-items属性用来水平居中元素。

• align-items: center;

• justify-content属性用来垂直居中元素。

总体而言，以上代码是实现页面居中最简单的方式。除此之外，还有其他的一些设置方式，大家可以多探索工作中的适合自己的方式。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！