使用 CSS 垂直居中 div

Subodh Poudel 2023年2月20日 2021年12月20日
  1. 使用内部 div 中的 toptransform 属性使用 CSS 使 div 垂直居中
  2. 在 CSS 中使用 CSS Flexbox 垂直居中 div
使用 CSS 垂直居中 div

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

使用内部 div 中的 toptransform 属性使用 CSS 使 div 垂直居中

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

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

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

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

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

例如,在 HTML 中创建一个 div 元素并用另一个 div 元素将其包裹起来。在 CSS 中,选择外部 div 并将 heightwidthbackground-color 设置为 180px300pxblue

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

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

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-contentalign-items 属性在 CSS 中垂直居中 div。我们可以使用 display 属性将容器定义为 flexbox。

justify-content 属性将水平对齐 flexbox 中的元素。它需要各种选项,如 flex-startflex-endcenter 等。

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

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

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

background 设置为 red,将 display 属性设置为 flex。最后,将值 center 设置为 justify-contentalign-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;
}
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn

相关文章 - CSS Alignment