使用 CSS 实现 div 居中

在网页设计中，让 div 元素在页面中居中是一个常见的需求。无论是水平居中、垂直居中，还是同时实现水平和垂直居中，CSS 都提供了多种方法来达成这一目标。

水平居中

对于行内元素或块级元素的水平居中，有不同的处理方式。如果是行内元素，例如文本或图片，我们可以将父元素的 text-align 属性设置为 center。示例代码如下：

.parent {
  text-align: center;
}

对于块级元素，要实现水平居中，可以将其 margin 属性设置为 0 auto。代码如下：

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

垂直居中

实现垂直居中相对复杂一些。如果已知元素的高度，可以使用绝对定位和负边距来实现。先将父元素设置为 position: relative，子元素设置为 position: absolute，然后通过 top 和 left 属性将其定位到父元素的中心，再用负边距将其向上和向左移动自身宽度和高度的一半。代码示例：

.parent {
  position: relative;
  height: 400px;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
}

另一种现代的方法是使用 flexbox 布局。通过设置父元素的 display 为 flex 或 inline-flex，然后使用 align-items 和 justify-content 属性来实现垂直和水平居中。代码如下：

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

水平垂直居中

结合上述方法，也能轻松实现水平垂直居中。除了 flexbox 布局外，grid 布局也能很好地完成任务。设置父元素 display: grid，然后使用 place-items: center 就可以将子元素在父元素中水平垂直居中。代码如下：

.parent {
  display: grid;
  place-items: center;
  height: 400px;
}

通过这些 CSS 技巧，开发者可以根据具体需求灵活选择合适的方法来实现 div 的居中效果，提升网页的美观度和用户体验。