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

Question

Hi I'm trying to complete this page for freecodecamp and I'm stuck on a few details.

Here's my code

I'm trying to get the "Martin Luther King Jr civil rights hero and icon" title centered vertically in the div. I'm also trying to center horizontally with the h3 tag "Timeline of Martin Luther King Jr.'s Life".

I've tried text-align:center; and the text-center bootstrap class. Neither seemed to work. I've also tried adding !important to see if maybe the bootstrap class was overriding it somehow. Any ideas?

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

Make the div with class row display as a table and the two children as table-cell. Then you can apply a vertical align middle

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

click here for demo

Answer 2

Since you're using flex box - you may want to leverage align-items and justify-content properties.

Here's the slightly updated markup and 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;
}

More on content centering with flex box here

Hope this helps :)