居中元素

在这个食谱中，您将看到如何使用 Flexbox 和 Grid 将一个盒子居中于另一个盒子内。水平和垂直居中都简单而直接。

an element centered inside a larger box

要求

将一个项目水平和垂直放置在另一个盒子的中心。

食谱

使用弹性盒

要将一个盒子居中于另一个盒子内，首先将包含的盒子变成 Flex 容器，方法是将其 display 属性设置为 flex。然后将 align-items 设置为 center 以实现垂直居中（在块轴上），将 justify-content 设置为 center 以实现水平居中（在内联轴上）。仅此而已！

HTML

html
<div class="container">
  <div class="item">I am centered!</div>
</div>

CSS

css
div {
  border: solid 3px;
  padding: 1em;
  max-width: 75%;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8em;
}

我们为容器设置了一个高度，以证明内部项目确实在容器内垂直居中。

结果

您也可以通过在内部项目本身设置 align-self 为 center 来垂直居中内部项目，而不是在容器上应用 align-items: center;。

使用网格

另一种用于将一个盒子居中于另一个盒子内的的方法是，首先将包含的盒子变成 Grid 容器，然后将其 place-items 属性设置为 center，以在块轴和内联轴上居中对齐其项目。

HTML

html
<div class="container">
  <div class="item">I am centered!</div>
</div>

CSS

css
div {
  border: solid 3px;
  padding: 1em;
  max-width: 75%;
}
.container {
  display: grid;
  place-items: center;
  height: 8em;
}

结果

您也可以通过在容器上应用 place-content: center;，或在内部项目本身应用 place-self: center 或 margin: auto; 来实现相同的居中效果，而不是在容器上应用 place-items: center;。

MDN 上的资源