在 CSS Flexbox 布局中解决 justify-content 和 align-items 的垂直和水平居中-JavaScript中文网-JavaScript教程资源分享门户

介绍

在前端布局中，实现垂直和水平居中是很常见的需求之一。如何实现垂直和水平居中呢？我们可以使用 CSS Flexbox 布局中的 justify-content 和 align-items 属性。不过，在使用这两个属性时容易出现一些问题，本文将详细讨论这些问题，并探讨如何解决它们。

垂直居中

垂直居中的实现，理论上应该是非常简单的，只需要将容器的高度设置为与子元素的高度一样，并使用 align-items: center 即可。具体代码示例如下：

.container {
  height: 100px;
  display: flex;
  align-items: center;
}

然而，这个方法并不总是奏效。在某些情况下，由于子元素的高度不确定，容器的高度也难以确定。此时，我们可以使用一个胶囊元素来将子元素嵌套起来，使其高度已知。接着，我们将这个胶囊元素设置为 flex 容器，并将其 align-items 设为 center。具体代码示例如下：

<div class="container">
  <div class="capsule">
    <div class="child">content</div>
  </div>
</div>

// javascriptcn.com code example
.container {
  display: flex;
  align-items: center;
}

.capsule {
  display: flex;
  align-items: center;
}

.child {
  width: 100%;
  text-align: center;
}

水平居中

实现水平居中的方法也很常见，我们可以使用 justify-content: center 属性即可。例如，我们可以这样设置样式：

.container {
  display: flex;
  justify-content: center;
}

然而，这个方法在某些情况下同样不奏效。例如，如果我们的子元素使用了 display: inline-block 属性，那么由于它们之间存在间距，即使使用了 justify-content: center 也无法完全居中。此时，我们可以通过给容器添加 font-size: 0; 和 letter-spacing: -0.3em; 两个属性来解决这个问题。具体代码示例如下：

// javascriptcn.com code example
.container {
  display: flex;
  justify-content: center;
  font-size: 0;
  letter-spacing: -0.3em;
}

.child {
  display: inline-block;
  vertical-align: middle;
  font-size: 1rem;
  letter-spacing: normal;
}

垂直和水平居中

在某些场景下，我们需要实现同时垂直和水平居中，这个时候该怎么做呢？我们可以将容器的 justify-content 和 align-items 都设置为 center，具体代码示例如下：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

结论

在本文中，我们讨论了在 CSS Flexbox 布局中实现垂直和水平居中的方法。这些方法有时候可能会出现一些问题，但是我们可以通过一些技巧来解决这些问题。希望本文能够对你有所启发，并能够帮助你解决你在实际开发中遇到的问题。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6737159d317fbffedf07f26a