css 左右居中

作者：刀剑傲天发布日期:2025-12-06 浏览:92

/* 使用 Flexbox 实现左右居中 */
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
}

/* 使用 margin 实现左右居中 */
.center-block {
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* 设置一个固定的宽度 */
}

/* 使用绝对定位和 transform 实现左右居中 */
.center-absolute {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

解释说明：

Flexbox 方法：通过 display: flex 和 justify-content: center，可以轻松实现子元素的水平居中。这种方法适用于单行或多行内容。
Margin 方法：通过设置左右 margin 为 auto，可以让块级元素自动计算左右边距，从而实现水平居中。需要给元素设置一个固定的宽度。
绝对定位 + Transform 方法：使用 position: absolute 和 left: 50% 将元素向右移动 50%，然后通过 transform: translateX(-50%) 向左移动自身宽度的一半，最终实现居中效果。

上一篇：cssfontfamily字体大全

下一篇：css 优先级