使用HTML div中的引导程序将文本水平和垂直居中

Question

嗨，我正在尝试完成freecodecamp的本页，但我停留在一些细节上。

这是我的代码

我正在尝试使“马丁·路德·金·小民权英雄和图标”标题在div中垂直居中。 我还尝试使用h3标签“小马丁·路德·金的生平”的时间轴水平居中。

我试过了text-align：center; 和文本中心引导程序类。 似乎都不起作用。 我也尝试添加！important以查看bootstrap类是否可能以某种方式覆盖了它。 有任何想法吗？

HTML：

<h1 class="display-2 text-center">Martin Luther King Jr</h1>
    <h3 class="text-center text-muted font-italic">civil rights hero and icon</h3>

Answer 1

使具有类row的div显示为表格，将两个孩子显示为表格单元格。 然后您可以在中间应用垂直对齐

.row{
  display:table
}
.row .col,.row .col-5{
  display:table-cell;
}
.centered div:first-child{
  width: 100%;
  text-align:center;
}

点击此处进行演示

Answer 2

由于您使用的是弹性框-您可能需要利用align-items和justify-content属性。

这是稍微更新的标记和CSS

的HTML

<div class="col centered-content" style="border-style:solid;border-color:grey;border-radius:20px;background-color:white!important;background-color: white;">
    <div class="centered-content__inner">
        <h1 class="display-2 text-center" style="">Martin Luther King Jr</h1>
        <h3 class="text-center text-muted font-italic">civil rights hero and icon</h3>
    </div>
</div>

CSS：

.centered-content {
    display: flex;
    justify-content: center;
    align-items: center;
}
.centered-content__inner {
    background: none;
}

此处更多有关使用flex box进行内容居中的内容

希望这可以帮助 ：）