On the boot page, how to center a div

Question

I need to create a responsive page using bootstrap by placing the div in the center of the page, as in the layout below.

Answer 1

UPDATE for Bootstrap 4

Simplified vertical grid alignment with flexible box

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'); html, body { height: 100% } 

 <div class="h-100 row align-items-center"> <div class="col" style="background:red"> TEXT </div> </div> 

Solution for Bootstrap 3

 @import url('http://getbootstrap.com/dist/css/bootstrap.css'); html, body, .container-table { height: 100%; } .container-table { display: table; } .vertical-center-row { display: table-cell; vertical-align: middle; } 

 <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script> <div class="container container-table"> <div class="row vertical-center-row"> <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div> </div> </div> 

This is a simple example of a horizontal and vertical div centered in all screen sizes.

Answer 2

CSS

 html, body { height: 100%; } .container { height: 100%; display: flex; justify-content: center; align-items: center; } 

HTML:

 <div class="container"> <div> example </div> </div> 

Violin example

Answer 3

In bootstrap 4

to center the child horizontally , use the bootstrap class

 justify-content-center 

use the bootstrap class to center the child vertically

  align-items-center 

but remember that do not forget to use the d-flex class with them, this is the bootstrap-4 helper class, like this

 <div class="d-flex justify-content-center align-items-center" style="height:100px;"> <div class="bg-primary">MIDDLE</div> </div> 

Note: be sure to add bootstrap-4 utilities if this code does not work.

Answer 4

Update for Bootstrap 4

Now that Bootstrap 4 is flexbox, vertical alignment is easier. For a full div, a flexbox div, we just my-auto for even top and bottom margins ...

 <div class="container h-100 d-flex justify-content-center"> <div class="jumbotron my-auto"> <h1 class="display-3">Hello, world!</h1> </div> </div> 

http://codeply.com/go/ayraB3tjSd/bootstrap-4-vertical-center

---

Vertical Center in Bootstrap 4

Answer 5

without a display table and without bootstrap, I would rather do it

 <div class="container container-table"> <div class="row vertical-center-row"> <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div> </div> </div> html, body, .container-table { height: 100%; } .container-table { width:100vw; height:150px; border:1px solid black; } .vertical-center-row { margin:auto; width:30%; padding:63px; text-align:center; } 

http://codepen.io/matoeil/pen/PbbWgQ

Answer 6

Good answer ppollono. I was just playing and I had a slightly better solution. CSS will remain the same, i.e.:

 html, body, .container { height: 100%; } .container { display: table; vertical-align: middle; } .vertical-center-row { display: table-cell; vertical-align: middle; } 

But for HTML:

 <div class="container"> <div class="vertical-center-row"> <div align="center">TEXT</div> </div> </div> 

That would be enough.

Answer 7

I think the easiest way to execute the layout using bootstrap is as follows:

 <section> <div class="container"> <div class="row"> <div align="center"> <div style="max-width: 200px; background-color: blueviolet;"> <div> <h1 style="color: white;">Content goes here</h1> </div> </div> </div> </div> </div> 

all I did was add div layers that allowed me to center the div, but since I don't use percentages, you need to specify the maximum div width for the center.

You can use the same method to center more than one column, you just need to add more div layers:

 <div class="container"> <div class="row"> <div align="center"> <div style="max-width: 400px; background-color: blueviolet;"> <div class="col-md-12 col-sm-12 col-xs-12" style="background-color: blueviolet;"> <div class="col-md-8 col-sm-8 col-xs-12" style="background-color: darkcyan;"> <h1 style="color: white;">Some content</h1> </div> <div class="col-md-4 col-sm-4 col-xs-12" style="background-color: blue;"> <p style="color: white;">More content</p> </div> </div> </div> </div> </div> </div> 

Note: I added a div with column 12 for md, sm and xs, if you do not, the first div with the background color (in this case "blueviolet") will crash, you can see the child divs, but not the background color.

Answer 8

For the current version of Bootstrap 4.3.1 use

Style

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <style type="text/css"> html, body { height: 100%; } </style> 

The code

 <div class="h-100 d-flex justify-content-center"> <div class="jumbotron my-auto"> <!-- example content --> <div class="alert alert-success" role="alert"> <h4 class="alert-heading">Title</h4> <p>Desc</p> </div> <!-- ./example content --> </div> </div 

Answer 9

Here are simple CSS rules that put any div in the center

 .centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Answer 10

jsFiddle

HTML

 <div class="container" id="parent"> <div class="row"> <div class="col-lg-12">text <div class="row "> <div class="col-md-4 col-md-offset-4" "id="child">TEXT</div> </div> </div> </div> </div> 

CSS

 #parent { text-align: center; } #child { margin: 0 auto; display: inline-block; background: red; color: white; }