css中怎样设置body居中显示

时间2023-10-22 12:54:04发布访客分类CSS浏览1086

导读：在使用CSS编写网页时，有时会遇到需要让body元素居中显示的情况。下面就介绍几种实现这一效果的方式。方法一：使用margin和auto可以通过设置body元素的margin属性为auto来实现水平居中和垂直居中。代码如下：body {...

在使用CSS编写网页时，有时会遇到需要让body元素居中显示的情况。下面就介绍几种实现这一效果的方式。方法一：使用margin和auto可以通过设置body元素的margin属性为auto来实现水平居中和垂直居中。代码如下：

body {
       margin: auto;
}

此时，body元素就会被居中显示。方法二：使用text-align和vertical-align同样可以通过设置body元素的text-align和vertical-align属性来实现居中对齐。代码如下：

body {
       text-align: center;
       vertical-align: middle;
}

需要注意的是，此方法只适用于内联元素和表格元素的垂直居中。方法三：使用flex布局使用CSS3新增的flex布局也可以实现居中对齐。代码如下：

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

其中，justify-content属性控制水平居中，align-items属性控制垂直居中。以上就是三种实现body元素居中显示的方法。根据实际情况选择适合自己的方式即可。

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