Bootstrap 4：将内容垂直放置在自定义div内的容器内

Question

I tried to read other answers but there's none for my specific case, as far as I could find.

I wanted to make a translucid background inside a bootstrap container to improve text readability. What I was able to achieve was this:

This doesn't look very good: I want the text and buttons to be vertically and horizontally aligned inside the my-background div.

From other questions I found here, I tried adding the classes align-items-center justify-content to my inner div but the result wasn't much better:

As we can see, the "Button" button still touches the bottom of the background and the content itself still isn't vertically aligned inside the background.

How do I fix this?

Here's my code:

<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

For something like this I'd recommend using flex.

A complete guide can be found here .

However, in order to get everything center aligned you can do something like this, which is in fact using 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> 

Please note that I changed the height of the background to ensure that you can see the result.