Html 如何使子内容相对于引导4中的父容器垂直居中

我一直在尝试使我的子内容按照父容器垂直居中。但是子容器总是相对于父容器。以下是我尝试过的代码：

HTML

<section id="welcome" class="bg-primary d-flex flex-column">
        <h1>Positions</h1>
        <div class="container text-center my-auto">
           Centered content
        </div>
     </section>

我想做的是使内容居中文本按照整个部分垂直居中

---

这是代码笔链接：

您的h1元素是导致其对齐错误的原因。如果你摆脱它（只是为了测试），你会看到中心内容移动到中心

显示：flex适用于所有直接子元素，因此您将对齐h1和#welcome元素的聚合高度。要将内容居中放置在高正方形的中心，您可以在#welcome To.my auto:

.my-auto {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: blue;
}

对齐项目是使用display:flex时垂直对齐的功能。但是，如果使用“flex direction:column”，则方向是“旋转的”，因此可以使用“对齐内容：中心”，这通常用于水平对齐

另一种方法是在要居中的内容的顶部和底部使用填充：

.my-auto {
  padding: 50px 0; /* 50px is an arbitrary number, just to demonstrate */
}

---

请注意，这将导致居中内容将所有其他元素垂直推离它。

您的h1元素是导致其对齐错误的原因。如果你摆脱它（只是为了测试），你会看到中心内容移动到中心

显示：flex适用于所有直接子元素，因此您将对齐h1和#welcome元素的聚合高度。要将内容居中放置在高正方形的中心，您可以在#welcome To.my auto:

.my-auto {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: blue;
}

对齐项目是使用display:flex时垂直对齐的功能。但是，如果使用“flex direction:column”，则方向是“旋转的”，因此可以使用“对齐内容：中心”，这通常用于水平对齐

另一种方法是在要居中的内容的顶部和底部使用填充：

.my-auto {
  padding: 50px 0; /* 50px is an arbitrary number, just to demonstrate */
}

---

请注意，这将导致居中内容将所有其他元素垂直推离它。

只需将

h1

定位为绝对位置即可将其从DOM内的相对定位中删除



位置
中心内容
只需将
h1
定位为绝对位置
即可将其从DOM内的相对定位中删除



位置
中心内容
我知道移除h1标签会将内容带到中心，但我需要按照设计将标题放在那里。你有什么解决方案吗？然后我想我会在你想要居中的内容的顶部和底部使用填充，因为使用flexbox，欢迎div中的所有内容都会受到影响。我知道移除h1标签会使内容居中，但我需要按照设计将标题放在那里。你有什么解决方案吗？然后我想我会在你想要居中的内容的顶部和底部使用填充，因为使用flexbox，欢迎div中的所有内容都会受到影响。