如何使用 CSS 将块元素居中对齐？

在网页设计中，常常需要将块元素居中对齐以使页面更加美观与整洁。本篇文章将介绍如何使用 CSS 来实现这一目的。

水平居中对齐

对于已知宽度的块元素

当我们已知块元素的宽度时，我们可以通过设置其 margin-left 和 margin-right 两个属性均为 auto 来实现水平居中对齐。示例代码如下：

.container {
  width: 960px; /* 假设容器宽度为 960px */
  margin-left: auto;
  margin-right: auto;
}

对于不定宽度或绝对定位的块元素

当我们不知道块元素宽度或需要使用绝对定位时，我们可以通过设置其左右两边的位置属性均为 0，并设置 width 属性或 left 和 right 属性的值作为相对父容器的偏移量来实现水平居中对齐。示例代码如下：

.container {
  position: relative; /* 确保子元素定位相对于父容器 */
}

.child {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto; /* 垂直居中 */
  width: 500px; /* 确保子元素宽度为 500px */
}

垂直居中对齐

对于已知高度的块元素

当我们已知块元素的高度时，我们可以通过设置其 margin-top 和 margin-bottom 两个属性均为 auto 来实现垂直居中对齐。示例代码如下：

.container {
  height: 240px; /* 假设容器高度为 240px */
  display: flex;
  align-items: center;
}

对于不定高度或绝对定位的块元素

当我们不知道块元素高度或需要使用绝对定位时，我们可以通过设置其上下两边的位置属性均为 0，并设置 height 属性或 top 和 bottom 属性的值作为相对父容器的偏移量来实现垂直居中对齐。示例代码如下：

.container {
  position: relative; /* 确保子元素定位相对于父容器 */
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto; /* 水平居中 */
  height: 120px; /* 确保子元素高度为 120px */
}

以上就是如何使用 CSS 将块元素居中对齐的方法介绍，希望对你有所帮助！