Bootstrap 4: вертикально центрировать содержимое внутри контейнера внутри пользовательского раздела

Question

Я пытался прочитать другие ответы, но для моего конкретного случая их нет, насколько я мог найти.

Я хотел сделать прозрачный фон внутри контейнера начальной загрузки, чтобы улучшить читаемость текста. Чего мне удалось достичь, так это:

Это выглядит не очень хорошо: я хочу, чтобы текст и кнопки были выровнены по вертикали и горизонтали внутри my-background div.

Из других вопросов, которые я нашел здесь, я попытался добавить классы align-items-center justify-content к своему внутреннему div, но результат был не намного лучше:

Как мы видим, кнопка «Кнопка» по-прежнему касается нижней части фона, а само содержимое по-прежнему не выровнено по вертикали внутри фона.

Как мне это исправить?

Вот мой код:

<div class="my-background">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-12">
                <div id="content align-items-center justify-content">
                    <h1>Hello World</h1>
                    <h3>Welcome to my fancy Hello World page!</h3>
                    <hr>
                    <button class="btn btn-default btn-lg">Button</button>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

html {
    height: 100%;
}
.my-background {
    text-align: center;
    height: 100%;
    margin-top: 100px;
    background-color: rgba(0, 0, 0, 0.4);
}

#content {
    margin: auto;
    text-align: center;
    padding-top: 25%;
}

Answer 1

Для чего-то подобного я бы рекомендовал использовать flex.

Полное руководство можно найти здесь .

Однако, чтобы выровнять все по центру, вы можете сделать что-то вроде этого, фактически используя flex.

html {
    height: 100%;
}
.my-background {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 700px;
    margin-top: 100px;
    background-color: rgba(0, 0, 0, 0.4);
}

hr {
  width: 100%;
}

#content {
    margin: auto;
    text-align: center;
    padding-top: 25%;
}

<div class="my-background">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-12">
                <div id="content align-items-center justify-content">
                    <h1>Hello World</h1>
                    <h3>Welcome to my fancy Hello World page!</h3>
                    <hr>
                    <button class="btn btn-default btn-lg">Button</button>
                </div>
            </div>
        </div>
    </div>
</div>

Обратите внимание, что я изменил высоту фона, чтобы вы могли видеть результат.