Vertically and horizontally center a div within a flex-fill using bootstrap 4

Question

Hi there I'm using bootstrap 4 the frame I'm using below is fine since all of my pages have started from the top but now I'm trying to center the elements.

<style>
    body,
    wrapper {
        min-height: 100vh;
    }

</style>

<body>

    <wrapper class="d-flex flex-column">
        <nav>
            
        </nav>
        <main class="flex-fill">
            <div class="container-fluid">
                THIS IS THE DIV IM ATTEMPTING TO CENTER
            </div>
        </main>
        <footer>
            
        </footer>
    </wrapper>



</body>

I have tried using top to attempt to change the position but that didn't work what did work, I did however manage to change the position by using margin-top with a vh value but that isn't responsive on different screen sizes, I was hoping anyone could help me with a responsive way to tackle this problem, I've already managed to center the div horizontally with row justify-content-center I just cant vertically center the div. Thanks

Carol Skelly · Accepted Answer · 2020-11-14T12:11:59.703

Basically this has already been asked before.

To align the content of main, also make it a d-flex container and then use align-items-center.

<wrapper class="d-flex flex-column min-vh-100">
    <nav>
        nav
    </nav>
    <main class="flex-fill d-flex align-items-center">
        <div class="container-fluid text-center"> THIS IS THE DIV IM ATTEMPTING TO CENTER </div>
    </main>
    <footer>
        footer
    </footer>
</wrapper>

https://codeply.com/p/bxCBF84ozL

Note: The default direction of d-flex is flex-direction:row, therefore align-items:center will vertical align. To vertical center in flex-direction:column you would instead use justify-content:center

Vertically and horizontally center a div within a flex-fill using bootstrap 4

1 Answers1