Vertically Center HTML Element Within a Div of Dynamic Height [duplicate]

Answer 1

I wanted to achieve it in a different way, (just for fun), and this one is working too: jsFiddle

The idea is using a :before block element of 50% height.

html, body{
 height:100%;
}

.post {
    width: 400px;
    height: 300px;
    background: rgba(0,0,0,0.8);
}

.post h2:before{
   content:"";
   display:block;
   height:50%;
}

.post h2 {   
    text-align:center;   
    height:100%; 
}

.post h2 a {
    color: #f7f7f7;
    font-size: 2.2em;
    margin-top:-20px;
    display: block;
}

Hope it helps :-)

Answer 2

Give your link a line-height larger than the text will ever be, and vertically align it in the middle. Then absolutely position it's parent within the div to be at top: 50% and margin top minus half the link's line-height:

jsFiddle

.post {
    position: relative;
}
.post h2 {
    text-align: center;
    width: 100%;
    position: absolute;
    top: 50%;
    margin-top: -150px;
}
.post h2 a {
    vertical-align: middle;
    line-height: 300px;
    white-space: nowrap;
}

It even works in IE7.

Answer 3

[UPDATED]

You can also do it like this: jsFiddle

.post {
    width: 400px;
    height: 200px;
    background: rgba(0,0,0,0.8);
    position:relative;    
}

.post h2 {
    position:absolute;
    top:50%;
    width:100%;
    text-align:center;

}

.post h2 a {
    line-height:100%;
    color: #f7f7f7;
    font-size: 2.2em;
    margin-top:-20px;
    display: block;
}

Answer 4

If you don't mind adding an extra HTML class, your simplest way is just to use vertical-align: middle.

http://jsfiddle.net/Wexcode/HtNJM/

<div class="post">
    <span></span><h2><a href="#">Hello!</a></h2>
</div>

CSS:

* { margin: 0; padding: 0; }

.post {
    background: rgba(0,0,0,0.8);
    width: 200px;
    height: 200px; }

.post span {
    height: 100%;
    vertical-align: middle;
    display: inline-block; }

.post h2 {
    position: relative;
    text-align: center;
    width: 100%;
    vertical-align: middle;
    display: inline-block; }

.post h2 a {
    color: #f7f7f7;
    font-size: 2.2em;
    font-weight: normal;
    font-style: italic;
    display: block; }

Answer 5

Using display:table and display:table-cell, which works in all modern browsers (IE 8+):

.post {
    width: 200px;
    height: 200px;
    background: rgba(0,0,0,0.8);
    display:table;
}

.post h2 {
    text-align: center;
    width: 100%;
    height: 100%;
    display:table-cell;
    vertical-align: middle;
}

.post h2 a {
    color: #f7f7f7;
    font-size: 2.2em;
    font-weight: normal;
    font-style: italic;
    width: 100%;
}