如何使用 CSS 让 div 居中

在网页设计中，让 div 元素居中是一个常见需求。无论是水平居中、垂直居中，还是同时实现水平与垂直居中，掌握相应的 CSS 技巧都能有效提升页面的布局效果与用户体验。

水平居中

对于行内元素或行内块元素，在父元素中设置 text-align: center 即可实现子元素 div 的水平居中。例如：

.parent {
  text-align: center;
}

如果 div 是块级元素，可以使用 margin: 0 auto 来实现水平居中。代码如下：

.child {
  width: 200px;
  margin: 0 auto;
}

垂直居中

当父元素高度固定时，利用 display: flex 布局能轻松实现 div 垂直居中。例如：

.parent {
  display: flex;
  align-items: center;
  height: 400px;
}

还可以使用绝对定位与负边距的方法。先将父元素设置为相对定位，子元素设置为绝对定位，然后通过设置 top: 50% 和负的 margin-top 来实现垂直居中：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  margin-top: -50px; /* 假设 div 高度为 100px */
}

水平垂直居中

使用 display: flex 布局时，在设置 align-items: center 实现垂直居中的基础上，再添加 justify-content: center 就能实现水平垂直居中：

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

利用绝对定位和 transform: translate(-50%, -50%) 也能达成同样效果。父元素相对定位，子元素绝对定位，然后设置 top: 50%、left: 50% 以及 transform: translate(-50%, -50%)，无论 div 大小如何，都能实现水平垂直居中：

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

通过这些 CSS 方法，开发者可以根据实际情况灵活选择，让 div 元素在页面中完美居中，为打造美观、实用的网页布局提供有力支持。