[分享]css中body页面居中显示

在CSS中，居中显示body页面是一个普遍的需求。这篇文章将介绍两种常用的方法，让你的页面在浏览器窗口中水平和垂直居中。 首先，我们可以使用CSS3的flexbox布局。为了将页面居中，我们只需要设置...

在CSS中，居中显示body页面是一个普遍的需求。这篇文章将介绍两种常用的方法，让你的页面在浏览器窗口中水平和垂直居中。

首先，我们可以使用CSS3的flexbox布局。为了将页面居中，我们只需要设置body元素的display属性为flex，并添加一些flex属性值即可。

body {
  display: flex;
  flex-direction: column; /* 垂直居中 */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
} 

另一个方法是使用CSS2的绝对定位和transform属性。这个方法需要将body元素的position属性设置为absolute，然后使用transform和top、left属性来将页面居中。

body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 将页面居中 */
} 

无论是使用flexbox布局还是绝对定位和transform属性，都可以让你的页面在浏览器窗口中居中显示。选择哪种方法取决于你的偏好和适配性需求。