Vertically aligning HTML
Vertically centering HTML always seems more difficult than one would expect given how easy it is to horizontally centre text. It would follow that with vertical-align: middle; vertical alignment would be just as easy via CSS. Alas, centring vertically invariably involves a lot more time and effort to get it working correctly. Here are some of the ways I do it.
The first three techniques require having a fixed height container, but the height of the content doesn’t matter. The background-colors are included to add clarity when viewing the examples. In some of these cases I’m using display: table-cell; which is supported all sensible browsers and in IE from version 8 onwards.
Vertically centring one line of text
This is the simplest case. The container must have a fixed height and we set the line-height property for the text to the height of the container. The text is centered within the containing element.
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
.container {
line-height: 150px;
height: 150px;
background-color: #eee;
}
Vertically centring multiple lines
Here we have lots of text wrapping onto multiple lines, the container is a fixed height. We’re using display: table-cell; to change the display type and then vertical-align: middle; to make it vertically centered.
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel volutpat dui. Ut euismod dolor leo, id volutpat massa ullamcorper eu.
</div>
.container {
display: table-cell;
vertical-align: middle;
height: 150px;
background-color: #eee;
}
Vertically centring an element
Here we are centering a <div> tag inside a fixed height container.
<div class="container">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel volutpat dui. Ut euismod dolor leo, id volutpat massa ullamcorper eu.
</div>
</div>
.container {
display: table-cell;
vertical-align: middle;
height: 150px;
background-color: #eee;
}
.content {
background-color: #ddd;
}
Vertically centring with a variable height container
Here the size of the container is determined by the height of another column. The text in column two is vertically centered against the height of column one.
<div class="parent">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel volutpat dui. Ut euismod dolor leo, id volutpat massa ullamcorper eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel volutpat dui. Ut euismod dolor leo, id volutpat massa ullamcorper eu.
</div>
<div class="container">
Lorem ipsum dolor sit amet.
</div>
</div>
.container {
display: table-cell;
vertical-align: middle;
width: 50%;
background-color: #eee;
}
Vertically centring an inline-block on a line of text
We can use vertical-align: middle; on an inline-block element to vertically center the block within a line of text. This same approach can also be applied to <img> tags.
<div class="container">
Lorem ipsum
<span class="content">dolor sit,<br>amet consectetur</span>
adipiscing elit.
</div>
.container {
background-color: #eee;
}
.content {
display: inline-block;
vertical-align: middle;
background-color: #ddd;
}
amet consectetur adipiscing elit.
Other examples
Here are some alternative ways of vertically centering using HTML and CSS:
www.jakpsatweb.cz/css/css-vertical-center-solution.html
phrogz.net/css/vertical-align/