How to centre a div in bootstrap 5? [duplicate]

Question

I couldn't find a straightforward way to centre a div in Bootstrap 5. Maybe I am missing something obvious. Google took me to the flex doc. In Bootstrap 4, I could do it by setting col-sm-* and using col-sm-offset-*

Note: I don't want to centre the content in the div. Just need to put whole div in the centre (horizontally). Is setting a margin the only way?

Answer 1

You can use with d-flex align-items-center justify-content-center like below demo:

body{
    height: 100vh;
} 
.container{
    height: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container d-flex align-items-center justify-content-center">
        <div>
                <h1>You Div</h1>
            </div>
    </div>