How to Vertically center a Boostrap Column

Question

I want to center this text vertically and horizontally inside a container, it is within a row and a column that is set to 12. But I can only get it to center horizontally and not vertically. I tried Flex but it moves all objects in the page to center, where I want just this one to center.

HTML:

 <div class="container-fluid home">

   <div class="row">
      <div class="col-md-12" id="text">
        <p>Hello World!</p>
      </div>

   </div>

CSS:

.home {
  height: 100%;
  background-image: url(images/home.png);
}

 #text {

   text-align:center;
 }

Possible duplicate of [vertical-align with Bootstrap 3](http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3) — Tim Grant, Dec 13 '16 at 00:49
Possible duplicate of [vertical align middle content with bootstrap 3](http://stackoverflow.com/questions/25140284/vertical-align-middle-content-with-bootstrap-3) — HDP, Dec 13 '16 at 05:44

score 1 · Accepted Answer · answered Dec 13 '16 at 03:32

You can use this code:

View code snippet results in expanded mode

.home {
 height: 150px;
 background-color:red;
 position:relative;
}

 #text {
  position:absolute;
  top:50%;
  text-align:center;
    text-align:center;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container-fluid home">

     <div class="row">
        <div class="col-md-12" id="text">
          <p>Hello World!</p>
        </div>

     </div>

score 1 · Answer 2 · answered Dec 13 '16 at 06:54

You can simply do this with css's transform property. But you have to make sure that your main container has a defined height like:

.home{height: 1000px;
}

or anything else, but in this case 100% height will not work as there is no height defined of its parent element. And after that we will include css transform property like this:

This is for your home class:

.home {
  height: 1000px;
  background: #ccc;
  float: left;
  width: 100%;
}

And you have to change your html structure a bit like this:

<div class="container-fluid home">
      <div class="col-md-12" id="text">
        <p>Hello World!</p>
      </div>
 </div>

After that we will define some css property to our div which we want to make vertically and horizontally middle.

#text{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

Now you can easily make your div vertical or horizontal align of the parent div.

How to Vertically center a Boostrap Column

2 Answers2