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

Question

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
vertical-align: middle doesn't work
How can i make sure that the <a></a> is vertically centered in this div, regardless of the size of the div:
http://jsfiddle.net/XF9WM/
Thanks

Answer 1

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%;
}

Answer 2

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 3

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 4

[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 5

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>Hello!</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; }