CSS布局居中技巧

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

使用 CSS 居中元素有时会比较棘手。虽然有很多方法可以实现居中，但具体使用哪种方法取决于元素本身及其内容。在尝试居中元素时，你可能会问自己以下几个问题：

• 它是行内元素还是块级元素？
• 是只有一行文字还是有多行文字？
• 它的宽度和高度是固定的，还是尺寸未知？

当你想让某个元素居中时，这些可能是你最常问自己的问题。

我将把这些技术分为水平方向、垂直方向以及两者兼有。
接下来我们来看代码。

水平居中

文本对齐

这是你可以用于文本和行内元素的最简单的水平居中技术。

p { text-align: center; }

如果要将行内元素居中，应该将其应用于其父元素，而不是直接应用于该元素本身：

.parent { text-align: center; }

<div class="parent">
 <strong>我心境平和</strong>
</div>

强的 {
 显示：行内块；
 宽度：100%；
 文本对齐方式：居中；
}

.block-box {
 宽度：600像素；
 margin: auto;
}

笔

绝对位置

水平和垂直居中的常用技巧是使用绝对定位的元素作为相对定位父元素的子元素。

我们所做的基本上是将子元素向左定位 50%，然后使用负 50% 将其向后移动一半的大小，translateX使其居中。

.parent { position: relative; }
.centered-element {
 位置：绝对定位；
 左侧：50%；
 变换：translateX(-50%)；
}

<div class="parent">
 <div class="centered-element">我居中了！</div>
</div>

这也是使宽度（和高度）未知的元素居中的好方法。

另一种方法是（如果您有已知宽度的元素），使用负值margin-left代替translateX：

.centered-element {
 位置：绝对定位；
 宽度：600像素；
 左侧：50%；
 margin-left: -300px; // 将其向后移动一半大小。
}

笔

弹性

如果您不关心对旧版浏览器的支持，那么使用 flex 是一种很好的水平（和垂直）居中一个元素或一组元素的方法。

.parent {
 显示方式：flex；
 justify-content: center;
 高度：100vh；
}

注意：请确保您没有将该flex-direction属性设置为列，否则您将产生相反的效果（垂直居中）。

笔

垂直居中

绝对位置

同样，我们可以使用之前用过的绝对定位技术，但这次不是将左侧位置设置为 50%，而是将顶部位置设置为 50%，然后向上移动 -50% translateY：

.parent { position: relative; }
.centered-element {
 位置：绝对定位；
 前50%；
 transform: translateY(-50%);
}

笔

表格单元格

实现垂直居中的好方法是使用 `vertical-align: middle`。当然，这有点棘手，因为你必须将其应用于父元素（父元素设置为 `true`） display: table和子元素（子元素设置为 `false`）display: table-cell。

.parent {
 显示方式：表格；
 高度：100vh；
}

.centered-element {
 显示：表格单元格；
 垂直对齐方式：居中；
}

注意：请确保父元素有高度，否则此方法无效。

笔

行高

如果您只想居中单个单词，而不是整个段落或文本行，那么这种方法是可行的。如果一个元素内只有一个单词，您可以通过将该元素的高度设置为固定值，并使其 line-height高度等于该元素的高度，来实现垂直居中：

。盒子 {
 宽度：600像素；
 高度：600像素；
 行高：600px；
}

<div class="box">
 <strong>我心境平和</strong>
</div>

笔

幽灵元素

在这种技术中，我们有两个行内块元素：一个容器，其中包含一个设置为全高的“幽灵”伪元素；以及一个子元素， vertical-align: middle;该子元素也设置为全高。这样，子元素就能与幽灵元素对齐——幽灵元素也具有全高。vertical-align: middle

.container { font-size: 0; }
.container::before {
  内容： '';
  显示：行内块；
  高度：100%；
  垂直对齐方式：居中；
}
.container strong {
 显示：行内块；
 垂直对齐方式：居中；
 字体大小：1rem；
}

注意：幽灵元素通常会在左侧创建一个空白区域，因此请确保在父容器上添加负边距（ margin-right: -0.25em）或，并在子元素上添加。font-size: 0font-size: 1rem

笔

弹性

我们已经了解了如何使用 flex 进行水平对齐。我们可以使用相同的align-items属性来实现垂直居中。

.parent {
 显示方式：flex；
 align-items: center;
 高度：100vh；
}

注意：再次提醒，请确保您没有将设置flex-direction为row，否则会产生相反的效果（水平居中）。

笔

水平和垂直居中

我们可以将之前使用的所有技术结合起来，使两个轴都居中。

在我们采用的所有技术中，绝对定位和柔性技术将为我们实现水平和垂直居中。

绝对位置

我们将元素定位到顶部和左侧的 50%，然后使用 50% 的负向平移将这两个位置向后移动：

.centered-element {
 位置：绝对定位；
 前50%；
 左侧：50%；
 变换：平移(-50%, -50%)；
}

笔

弹性

再次使用相同的弹性技巧，我们将两者同时使用 align-items并justify-content设置为中心。

.parent {
 显示方式：flex；
 align-items: center;
 justify-content: center;
 高度：100vh；
}

笔

有什么补充吗？欢迎在评论区留言。

感谢PVGR提供有用的信息和更正。