垂直和水平对齐中心 div - CSS

在网页布局中，有时需要将一个 <div> 元素垂直和水平对齐至页面中心，实现居中效果。本文将介绍两种实现方式。

方式一：使用 flexbox

flexbox 是 CSS 中用于布局的一种模型，它在解决布局问题时非常方便。我们可以通过将 <div> 元素的父元素设置为 display: flex，并设置 justify-content 和 align-items 属性为 center，来实现对齐至页面中心。

示例代码如下：

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

<div class="container">
  <div>要居中的内容</div>
</div>

方式二：使用绝对定位和 transform

另一种实现方式是使用绝对定位和 transform 属性。我们可以将要居中的 <div> 元素设置为绝对定位，然后将其左、上定位为 50%，再使用 transform 属性将其向左、向上移动自身宽度和高度的一半，实现对齐至页面中心的效果。

示例代码如下：

.container {
  position: relative;
}
.container div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <div>要居中的内容</div>
</div>

以上介绍了两种实现垂直和水平对齐至页面中心的方式，可以根据实际需求选择采用哪一种方法。