Vertical alignment of my div inside the body

Question

Is there a CSS way to vertically align a div in a body element?

The fact is that my div will have a different height each time, so it is not constant.

These are the things I tried, but they do not work:

body { vertical-align: middle; } #mainContent { vertical-align: middle; } // Also this body { margin-top: 20%; margin-bottom: 20%; } 

Answer 1

To be honest, often my opinion is that if you are doing vertical alignment, you should still use a table. I know this often frowned, but it is still the easiest and cleanest way to vertically center something.

HTML

 <table> <tbody> <tr> <td> <div>Your DIV here.</div> </td> </tr> </tbody> </table> 

CSS

 td {vertical-align: middle;} 

Answer 2

I did this without a table: ( demo on dabblet.com )

The main trick in this demo is that in the normal flow of elements going from top to bottom, therefore margin-top: auto set to zero. However, for an absolutely positioned element, the same distribution of free space applies and can likewise be centered vertically in the indicated top and bottom (does not work in IE7).

This trick will work with any div sizes.

HTML:

 <div></div> 

CSS

 div { width: 100px; height: 100px; background-color: red; position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto; } 

Answer 3

The usual problem. I have seen many people offering a direct css solution for this, but they all require knowing the height of the element that needs to be centered, so there is no help.

I usually do this with jquery:

 $(document).ready(function(){ site.resize(); $(window).resize(function(){ site.resize(); }); }); var site = { resize: function(){ var new_margin = Math.ceil(($(window).height() - $('#mainContent').height()) / 2); $('#mainContent').css('margin-top', new_margin + 'px'); } }; 

Answer 4

Surprisingly (or not), the vertical-align tool really works best for this job. Best of all, no Javascript required.

In the following example, I position the outer class in the middle of the body and the inner class in the middle of the outer class.

Preview: http://jsfiddle.net/tLkSV/513/

HTML:

 <div id="container"> <span></span><div class="outer"> <span></span><div class="inner"> </div> </div> </div> 

CSS

 html, body { height: 100%; margin: 0; padding: 0; } #container { text-align: center; height: 100%; } span { height: 100%; vertical-align: middle; display: inline-block; } .outer { width: 100px; height: 200px; padding: 0; border: 1px solid #000; vertical-align: middle; display: inline-block; } .inner { background: red; width: 30px; height: 20px; vertical-align: middle; display: inline-block; } 

Vertical alignment works by aligning the centers of elements that are next to each other. Applying vertical alignment to a single element does absolutely nothing. If you add a second element that does not have a width, and will be the height of the container, your only element will be moved vertically with this element without width, thus vertically centering it. The only requirements are that you set both elements in an inline (or inline block) and set their vertical alignment attribute to vertical-align: middle .

Note. In my code below, you may notice that the <span> tag and the <div> are touching. Since they are inline elements, space will actually add a space between the element with no width and your div, so remember to leave it.

Answer 5

You can do this without using tables and without adding additional elements:

 <ul> <li>One short item</li> <li>Any real long text...</li> <li>Another short item</li> </ul> 

And then CSS:

 ul { list-style-type: none; display: table-row; } li { display: table-cell; vertical-align: middle; } 

You can see it here

It will work with any other hierarchy, including div, p, etc.