Bootstrap 4: vertically center content inside a container inside a custom 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%;
}

Inorder to do that you need to add a fixed height to the parent element. — Ramesh, Sep 08 '18 at 14:35
https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css — Ramesh, Sep 08 '18 at 14:37
@ramesh even though the answer was kind of in that link, it didn't help resolve my specific problem, which was the misuse of margins and padding. With 7otk's answer I was able to know why I was wrong. To everyone else, having my question downvoted even though it follows the rules, is well written, shows what I tried to do and has code examples is very discouraging, even more so if the people downvoting it don't tell me why they did, so I can improve in the future. — C. Rib, Sep 08 '18 at 15:20

score 3 · Accepted Answer · answered Sep 08 '18 at 14:32

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.

Hi, flex is supported by almost all major browsers. See https://caniuse.com/#search=flex — 7otk, Sep 08 '18 at 14:41
This worked with a few adjustments. Inside content I left only text-align: center and removed all padding and margins (this is important), and in my-background I also added a bottom padding of 10px. Here's a JSFIddle that illustrates my solution: https://jsfiddle.net/vbhLxojz/4/ — C. Rib, Sep 08 '18 at 18:24

Bootstrap 4: vertically center content inside a container inside a custom div

1 Answers1