css如何使页面整体居中

1. 介绍

网页设计中，常见的情景是需要将整个页面居中显示。这种布局方式使得页面看起来更加整齐，也能够防止页面错位或者变形。在CSS中，有多种方法可以实现页面整体居中，下面将会介绍其中的几种方式。

2. 使用margin属性

2.1 水平居中

要使页面水平居中，我们可以将左右两边的margin都设置为auto。实现代码如下：

body {
  margin: 0 auto;
}

这里的0表示上下边距为0，auto则表示左右边距自动居中，即平分剩余空间。

值得注意的是，要使用这种方式进行居中，必须将父元素的宽度设定为一个明确的值，比如100%或者具体的像素值。

2.2 垂直居中

使用margin属性进行垂直居中比较麻烦，需要将父元素设置为相对定位，再用绝对定位的方式将子元素定位到中心位置。实现代码如下：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

这里先将父元素设置为相对定位，这样才能使用绝对定位的方式对子元素进行定位。然后将子元素定位到上边界和父元素中心点的距离为50%的位置，这样子元素的中心点已经跟父元素的中心点重合，但是子元素默认的位置是以左上角为基准进行计算的，因此需要再用`transform`属性将子元素向上移动自身高度的一半，这样子元素就垂直居中了。

3. 使用Flexbox

Flexbox是CSS3中新增加的一种布局方式，可以较为方便地控制布局方向、元素之间的间距以及元素的对齐方式等。使用Flexbox可以轻松实现水平/垂直居中。实现代码如下：

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

`这里使用flex布局，将容器的display属性设置为flex，然后将justify-content和align-items都设置为center，这样容器内的元素就可以水平居中和垂直居中。

需要注意的是，Flexbox布局需要对比较老的浏览器进行兼容性处理，比如Internet Explorer9 (IE10以下)等。

4. 结论

以上介绍了几种常见的页面居中布局方式，其中使用margin属性和Flexbox比较常用。使用margin属性在水平居中上比较简单，但是在垂直居中上采用绝对定位的方式比较麻烦。而使用Flexbox则可以同时实现水平和垂直居中，而且代码量比较少。