CSS实现页面的水平居中和垂直居中

实现页面的水平居中可以通过以下两种方式：

使用margin实现水平居中

可以将元素的左右margin都设置为auto，这样该元素就可以水平居中。

css
Copy code
.element {
  width: 200px;
  margin: 0 auto;
}

使用flex布局实现水平居中

可以将元素的父容器使用flex布局，并设置justify-content为center，这样该元素就可以水平居中。

css
Copy code
.container {
  display: flex;
  justify-content: center;
}

需要注意的是，使用flex布局需要考虑兼容性问题。

实现页面的垂直居中可以通过以下几种方式：

使用flex布局实现垂直居中

可以将元素的父容器使用flex布局，并设置align-items为center，这样该元素就可以垂直居中。

css
Copy code
.container {
  display: flex;
  align-items: center;
}

使用table-cell实现垂直居中

可以将元素的父容器设置为display: table-cell，并设置vertical-align为middle，该元素也可以垂直居中。

css
Copy code
.container {
  display: table-cell;
  vertical-align: middle;
}

使用绝对定位和transform实现垂直居中

可以将元素的位置设置为绝对定位，并使用transform属性实现垂直居中。

css
Copy code
.element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

需要注意的是，在使用绝对定位和transform实现垂直居中时，需要将父容器的position属性设置为relative，否则该元素会相对于文档进行定位。