In this tutorial, we are going to cover the various methods of centering content vertically. Centering elements vertically is a task that often introduces additional challenges for web developers. There are various solutions with regard to centering, and they all depend on exactly what type of content you want to center.
The reason is that HTML elements used for content can either be inline-level elements or block-level elements. Both of these types of elements behave differently so vertically aligning them is performed in different ways.
Vertical-Align Property
Most people try to vertically align content by using the vertical-align: middle style. This may seem logical, especially for those of you who have been developing pages for quite some time and use table-based layouts.
vertical-align works well on table cells and with some inline elements. The use of vertical-align will depend on the element. Let’s take a look at some of the examples where we use the vertical-align property.
Display as Table Cells
We can style a block-level element with the display property and value of table-cell along with the vertical-align property and value of middle. You should note that CSS tables are not the same as HTML tables. In addition, while this will work for most modern browsers, Internet Explorer (IE) version 7 and earlier does not support it.
The HTML
<div class="container">
<div class="vTableCell">
This text is vertically centered.
</div>
</div>The CSS
.container {
display: table;
}
.vTableCell {
display: table-cell;
vertical-align: middle;
height:200px;
}Vertically Align Inline Elements – Images
Some inline elements such as images can be centered vertically using this approach. Images are technically inline-level elements but behave more like inline-block elements. They can be considered blocks as well since you can set their width and height attributes.
This is not the case for most other inline elements. If you are going to use the vertical-align property on images, be aware that not all browsers may treat inline-block elements the same way. Make sure you test this approach using browsers that you expect will be visiting your site.
The HTML
<p>This image is vertically
<img src="image1.jpg" width="128" height="64" />
on this line.
</p>The CSS
p {
font-size:large;
}
img {
vertical-align: middle;
}Line-Height Method
Using the line-height property, we can vertically center a single line of text. All that you need to do is set a line-height on the element containing the text.
The line-height needs to be set to a value that is larger than the font size. This will result in equal space above and below the text and so the text will be located vertically centered.
The HTML
<p class="vCenter">
This single line of text is centered vertically.
</p>The CSS
.vCenter {
line-height: 100px;
}This approach works well across all browsers, but for a single line of text. If your text is able to wrap to the second line, you will need to use a different approach.
You should also note that when setting the size of the font, you must use font-size instead of the shortcut font. The reason is that the shortcut property includes line height so if you do not set it in the shortcut property, it will reset the line height back to the default value of 1.
Tip: If you need to vertically center multiple lines of text, use the table-cell approach described above.
Absolute Positioning with Negative Margins
This technique will work for block level elements regardless of the browser that is used to visit the page. Using this approach, we simply need to set the height of the element we want to center vertically within its parent element. We can use fixed pixels or percentages for the height.
In this example, we will use two divs (parent and child) where the child element will be set with an absolute position.
The HTML
<div id="container">
<div id="content"></div>
</div>The CSS
#container {
position: relative;
height:300px;
}
#content {
position: absolute;
height: 150px;
width: 150px;
background: #ffaa00;
margin: -75px 0 0 -75px;
top: 50%;
left: 50%;
}You should notice that for both div elements, we set the positioning for the outer (parent) element to relative, while the inner (child) element was set to absolute. In addition, we set the top and left values of the child to be 50% each, which is the center of the parent.
However, this sets the top left corner to be in the center so more tweaking is needed. To vertically center the child, we need to move the child up by half its height and if we want to horizontally center it as well, move it to the left by half its width.
Our example used fixed lengths, but we can use percentages as well if needed. To move the child up and over to the left, we use negative top and left margins that are equal to half of the child’s height and width. This technique is specifically used for block level elements.
Conclusion
There is no right and wrong approach here. Some of the techniques in this guide will work better for inline elements while others will work better for block-level elements.
You have to consider that some examples listed above may not work in older versions of a certain browser. Always try to use a simple approach that will work for the majority of your users.
