迹忆客 专注技术分享

本文将介绍在 CSS 中垂直居中 div 的方法。

使用内部 div 中的 top 和 transform 属性使用 CSS 使 div 垂直居中

此方法使用两个容器来演示如何垂直居中 div。

首先，我们可以创建一个外部和内部 div，我们将相对于外部 div 垂直居中内部 div。我们可以使用 CSS 属性 transform 和 top 垂直居中内部 div。

top 属性只设置定位元素的垂直位置。该属性根据应用于元素的位置属性表现出不同的行为。

例如，如果 position 设置为 relative，元素的顶部边缘将从其正常位置向下或向上移动。transform 属性采用多种值，而 translateY() 是我们将使用的值。

translateY() 函数将仅从 Y 轴平移元素。我们可以使用这两个属性垂直居中 div。

例如，在 HTML 中创建一个 div 元素并用另一个 div 元素将其包裹起来。在 CSS 中，选择外部 div 并将 height、width 和 background-color 设置为 180px、300px 和 blue。

接下来，选择内部 div 并将 position 属性​​设置为 relative。然后，应用 red 作为 background-color 属性，并为 div 设置 20px 高度，并使用 translateY(-50%) 作为 transform 属性的值。

在下面的示例中，top 属性的 50% 值会将内部 div 的顶部边缘放置在外部 div 的垂直中间部分。但是，内部 div 没有居中，因为它的 height 为 20px。

translateY(-50%) 值将使顶部边缘向上移动其高度的 50%。由于负值，它将向上移动，这意味着 div 将向上移动 10px。这样，内部 div 垂直居中。

示例代码：

<div class='outer-div'>
 <div class='inner-div'>
 
 </div>
</div>

div.outer-div {
 height: 180px;
 width: 300px;
 background-color: blue;
}

div.inner-div {
 position: relative;
 background-color:red;
 height:20px;
 top: 50%;
 transform: translateY(-50%);
}

在 CSS 中使用 CSS Flexbox 垂直居中 div

我们可以创建一个灵活的容器并使用 justify-content 和 align-items 属性在 CSS 中垂直居中 div。我们可以使用 display 属性将容器定义为 flexbox。

justify-content 属性将水平对齐 flexbox 中的元素。它需要各种选项，如 flex-start、flex-end、center 等。

类似地，align-items 属性将垂直放置 flexbox 内的元素。

例如，创建一个带有 box 类的 div，并在其中创建另一个 div。在内部 div 中写入一些文本。

在 CSS 中选择 body 和 html 标签并将高度设置为 100%。接下来，选择 box 类并将其 height 设置为 100%。

将 background 设置为 red，将 display 属性设置为 flex。最后，将值 center 设置为 justify-content 和 align-items 属性。

下面的示例将垂直和水平居中 div 内的文本。我们只能在一个灵活的容器中使用这两个属性。

因此，我们可以使用 flexbox 将 div 居中。

示例代码：

<div class="box">
 <div>The Div</div>
</div>

html,body {
 height: 100%;
}

.box {
 height: 100%;
 background: red;
 display: flex;
 justify-content: center;
 align-items: center;
}