How to vertically center a div in a Bootstrap column?

Question

I'm trying to vertically (and horizontally) center a div (height and width unknown) in a Bootstrap column. I can horizontally center the div by setting text-align to center. However I am struggling to vertically center the div. Here is a snippet of my code:

<div class="row">
    <div class="col-md-8 col-md-offset-2 col-xs-12">
        <div style="text-align: center"> <!--this works-->
            <p>Content goes here</p>                
        </div>
    </div>
</div>

Thanks in advance!

Also have a look at [Vertical align with bootstrap 3](http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3) — Hashem Qolami, Sep 19 '14 at 21:35

score 0 · Answer 1 · edited Jun 20 '14 at 16:33

0

If you're using Twitter Bootstrap and you have the Bootstrap 3, they added <div class="center-block">...</div>.

Reference: Bootstrap v3.1.1.

edited Jun 20 '14 at 16:33

Jason Aller

3,541
28
38
38

answered May 27 '14 at 01:48

henrymason

109
5

Hey, thank you for you response. However I tried using the center-block class but it does not work Here's my code: `

Content goes here

` – rmg.n3t May 27 '14 at 15:37
this is horizontal centering, still – Jacob Raccuia Oct 08 '14 at 19:19
the class "center-block" is for horizontal centering, not vertical centering. – Camille Sévigny Nov 29 '17 at 15:10

score -1 · Answer 2 · answered May 27 '14 at 20:13

You may want to give this a shot:

<div class="row">
   <div class="col-md-8 col-md-offset-2 col-xs-12 Outer">
      <div class="Inner>
         <p >Content goes here</p>                
      </div>
   </div>
</div>


/* CSS Code */

.Outer {
   border: 1px solid black;  /* Just so you can see it centered vertically */
   display: table-cell;
   height: 100%;
   min-height: 15em;    /* Set to height you need */
}
.Inner > p {
   vertical-align: middle;
   text-align: center;
   margin: 0 auto;
}

Keep in mind that the browser will automatically recognize the resolution width; however, the same functionality doesn't apply to height. You need to set a specified height on the outer element in order for the inner content to have something to vertically align itself to. Hope this helps!

Hey thank you very much. However it doesn't work. The paragraph get centered horizontally but it still remains at the top vertically. — rmg.n3t, May 27 '14 at 23:08

How to vertically center a div in a Bootstrap column?

2 Answers2