Tag: HTML

So what is the best way to center blocks vertically using CSS?

There are bunch of techniques, lets try each of them!

1. “line-height” property

HTML code:

<div class="outer-block">
   <div class="inner-block">
      <p>Some text</p>
      <p>Some more text</p>
   </div>
</div>

CSS code:

.outer-block { 
   height: 200px; 
   line-height: 200px; 
   text-align: center; 
}
.inner-block { 
   display: inline-block; 
   line-height: 1.5;
   text-align: left; 
   vertical-align: middle; 
}

Here is the result:

 
So it works just good, quite simple, but it doesn’t support variable height.

2. “position: absolute” and negative margins

HTML code:

<div class="outer-block">
   <div class="inner-block">
      <div class="inner-text">
         <p>Some text</p>
         <p>Some more text</p>
      </div>
   </div>
</div>

CSS code:

.outer-block {
   position: relative;
   height: 200px; 
   text-align: center; 
}
.inner-block { 
   position: absolute;
   top: 50%;
   left: 0;
   margin-top: -30px;
   width: 100%;
   height: 60px;
   text-align: center; 
}

Here is the result:

 
Another good approach, not so simple as line-height though. However it needs inner block to by fixed height so negative margin-top can be set. And it needs additional block to center text block horizontally.

3. Table cell method

HTML code:

<div class="some-container">
   <div class="outer-block">
      <div class="inner-block">
         <div class="inner-text">
            <p>Some text</p>
            <p>Some more text</p>
         </div>
      </div>
   </div>
</div>

CSS code:

.some-container {
   height: 200px;
}
.outer-block { 
   width: 100%; 
   height: 100%;
   display: table;
}
.inner-block { 
   width: 100%; 
   height: 100%;
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}

Here is the result:

 
This is a great approach if you have container with variable height, this method will certainly work in this case! Downside of this method is that it will not work in older versions of IE. Also it needs additional block to center text block horizontally. Another pros is that it will expand if inner-block content height will became bigger than outer block.

If you need it to work in older IE versions you can use explicit table tags instead of div blocks:

HTML code:

<div class="some-container">
   <table class="outer-block">
      <tr>
         <td class="inner-block">
            <div class="inner-text">
               <p>Some text</p>
               <p>Some more text</p>
            </div>
         </td>
      </tr>
   </table>
</div>

CSS code:

.some-container {
   height: 200px;
}
.outer-block { 
   width: 100%; 
   height: 100%; 
}
.inner-block {
   vertical-align: middle;
   text-align: center;
}

Here is the result:

Summary

To summary this methods, I would say the best way for responsive designs is table cell method. Despite it doesn’t support old versions of IE this is virtually the only method to fully center block vertically for responsive design without JavaScript snippets. Two other ways always require outer or inner block to have fixes height value.