Center for vertical alignment in bootstrap 4

Question

I am trying to center my Container in the middle of the page using Bootstrap 4.

Answer 1

Important! The vertical center relative to the height of the parent

If the parent of the element you are trying to center does not have a specific height , none of the vertical centering solutions will work!

Now for vertical centering in Bootstrap 4 ...

You can use the new flexbox & size utilities to make container full height and display: flex . These parameters do not require additional CSS (except that the height of the container (i.e.Html, body) should be 100% ).

Option 1 align-self-center on child flexbox

 <div class="container d-flex h-100"> <div class="row justify-content-center align-self-center"> I'm vertically centered </div> </div> 

https://www.codeply.com/go/fFqaDe5Oey

Option 2 align-items-center on parent .row flexbox ( .row is display:flex; flex-direction:row )

 <div class="container h-100"> <div class="row align-items-center h-100"> <div class="col-6 mx-auto"> <div class="jumbotron"> I'm vertically centered </div> </div> </div> </div> 

https://www.codeply.com/go/BumdFnmLuk

Option 3 justify-content-center for parent .card flexbox ( .card is display:flex;flex-direction:column )

 <div class="container h-100"> <div class="row align-items-center h-100"> <div class="col-6 mx-auto"> <div class="card h-100 border-primary justify-content-center"> <div> ...card content... </div> </div> </div> </div> </div> 

https://www.codeply.com/go/3gySSEe7nd

---

Learn more about Bootstrap 4 Vertical Centering

Now that Bootstrap 4 offers flexbox and other utilities , there are many approaches to vertical alignment. http://www.codeply.com/go/WG15ZWC4lf

1 - vertical center using auto fields:

Another way to center vertically is to use my-auto . This will center the element inside the container. For example, h-100 col-sm-12 is the row height, and my-auto will be vertically col-sm-12 .

 <div class="row h-100"> <div class="col-sm-12 my-auto"> <div class="card card-block w-25">Card</div> </div> </div> 

Vertical Center Using Auto Margins Demo

my-auto represents fields on the vertical Y axis and is equivalent to:

 margin-top: auto; margin-bottom: auto; 

---

2 - Vertical Center with Flexbox:

Since Bootstrap 4 .row now display:flex you can just use align-self-center in any column to vertically align-self-center it ...

  <div class="row"> <div class="col-6 align-self-center"> <div class="card card-block"> Center </div> </div> <div class="col-6"> <div class="card card-inverse card-danger"> Taller </div> </div> </div> 

or use align-items-center on everything .row to center vertically all col-* in a row ...

  <div class="row align-items-center"> <div class="col-6"> <div class="card card-block"> Center </div> </div> <div class="col-6"> <div class="card card-inverse card-danger"> Taller </div> </div> </div> 

Vertical center Different column heights Demonstration

Look at this Q / A in the center, but keep the same height

---

3 - Vertical center using display utilities:

Bootstrap 4 has display utilities that can be used for display:table , display:table-cell , display:inline , etc. They can be used with vertical alignment utilities to align elements of inline, inline blocks, or table cells.

 <div class="row h-50"> <div class="col-sm-12 h-100 d-table"> <div class="card card-block d-table-cell align-middle"> I am centered vertically </div> </div> </div> 

Vertical Center Using the Utils Demo Display

More examples
The vertical center image in the <div>
Vertical Center .row in.container
Vertical center and bottom in the <div>
The vertical center of the child inside the parent
Vertical center full screen jumbotron

---

Important! Did I mention height?

Remember that vertical centering is relative to the height of the parent element. If you want to focus on the whole page, in most cases it should be your CSS ...

 body,html { height: 100%; } 

Or use min-height: 100vh ( min-vh-100 in Bootstrap 4.1+) on the parent / container. If you want to center the child inside the parent. The parent must have a certain height .

Also see:
Vertical alignment at boot 4
Bootstrap 4 centered vertically and horizontally

Answer 2

you can vertically align your container by creating the container of the parent container and adding align-items:center :

 body { display:flex; align-items:center; } 

Updated pen

Answer 3

After bootstrap, 4 classes helped me solve this problem

 <div class="col text-center justify-content-center align-self-center"> <img width=3rem src=".." alt="..."> </div> 

Answer 4

Since none of the above worked for me, I am adding another answer.

Purpose: To vertically and horizontally align the div on the page using 4th class bootbox classes.

Step 1: Set your outer div to 100vh . This sets the height to 100% of the height of Veiwport. If you do not, nothing else will come of it. Setting it to a height of 100% applies only to the parent, so if the parent is not the full height of the viewport, nothing will work. In the example below, I set Body to 100vh.

Step 2. Install the container container into the flexbox container with the d-flex class.

Step 3: Center the div horizontally with the justify-content-center class.

Step 4: Center the div vertically with align-items-center

Step 5: Launch the page, view your vertical and horizontally-centered div.

Note that there is no special class that needs to be installed on the very center with the center (child div)

 <body style="background-color:#f2f2f2; height:100vh;"> <div class="h-100 d-flex justify-content-center align-items-center"> <div style="height:600px; background-color:white; width:600px;"> </div> </div> </body> 

Answer 5

 .jumbotron { position: relative; top: 50%; transform: translateY(-50%); } 

Answer 6

In Bootstrap 4 (beta), use align-middle . See Bootstrap 4 Vertical Alignment Documentation :

Change the alignment of items using vertical alignment utilities. Note that vertical alignment only affects the inline , inline , inline, and table elements .

Choose .align-baseline , .align-top , .align-middle , .align-bottom , .align-text-bottom and .align-text-top as needed.

Answer 7

 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row align-items-center justify-content-center" style="height:100vh;"> <div>Center Div Here</div> </div> </div> </body> </html> 

Answer 8

 <div class="col-lg-5 col-sm-5 offset-1 d-flex"> <div class="offer-txt justify-content-center align-self-center"> <span class="inner-title">Our Offer</span> <h2 class="section-title">Todays Special </h2> <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly.</p> </div> </div> 

Answer 9

I did this with Bootstrap 4.3.1 :

 <div class="d-flex vh-100"> <div class="d-flex w-100 justify-content-center align-self-center"> I'm in the middle </div> </div> 

Answer 10

I tried all the answers here, but found here the difference between h-100 and vh-100. Here is my solution:

  <div className='container vh-100 d-flex align-items-center col justify-content-center'> <div className=""> ... </div> </div > 

Answer 11

/ * You must add a height of 100vh * /

Center

Answer 12

In Bootstrap 4.1.3:

This worked for me when I tried to center the boot icon inside container > row > column next to the h1 header.

What did simple css do:

 .my-valign-center { vertical-align: 50%; } 

or

 <span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>