Centered Vertical and Horizontal Align of elements in css

In this tutorial, we will see how to center align:

• horizontaly an element with a fixed width
• horizontaly an element with no specific width
• verticaly an element with a fixed height
• verticaly an element with no specific height
• horizontally and vertically an element with fixed measure
• horizontally and vertically an element with no specific measure
• horizontally and vertically a single line of text

1. Center horizontal align of an element with fixed width

Css Rules:

width: 200px; /*the width of the element*/
margin:auto; /*automatic value of left and right margin based on the width of the parent element*/

Concrete example:

<div style="width:200px;margin:auto;">
<!–content–>
</div>

NB: margin:auto; does not work if a fixed width is not specified
Tested on Windows with: Firefox, Internet Explorer 6+, Safari, Opera

2. Center horizontal align of an element with no specific width

Css rules:

text-align: center; /*css text property with value center*/

Concrete example:

<div style="text-align:center;">
<!–content–>
</div>

NB: the text-align; does not work for element with a fixed width
Tested on Windows with: Firefox, Internet Explorer 6+, Safari, Opera

3. Center vertical align of an element with fixed height

Css Rules:

height:100px; /*the height of the element*/
position:absolute; /*the element is removed from the natural flux of the page and positioned in a absolute way*/
top:50%; /*the top border of the element is positioned at half of the available height of the parent element*/
margin-top:-50px; /*half of the element height is removed from the top margin to center it*/

Concrete example:

<div style="height:100px;position:absolute;top:50%;margin-top:-50px;">
<!–content–>
</div>

NB: to position the element in an absolute way in relation to its parent element, do not forget to apply the position:relative; to this last one.
Tested on Windows with: Firefox, Internet Explorer 6+, Safari, Opera

4. Center vertical align of an element with no specific height

Css rules:

#container{
height:300px; /*the element to center with no specific height needs to be positioned in relation to a parent element with fixed height*/
display:table; /*the parent element is displayed as a table element*/
}
#centered-content{
display:table-cell; /*the centered element is displayed as a table cell*/
vertical-align:middle; /*the css property vertical-align with value middle to center vertically the element*/
}

Concrete example:

<div style="display:table;height:300px;">
<div style="display:table-cell;vertical-align:middle;">
<!–content–>
</div>
</div>

NB: the property vertical-align is valid only for this case when applied to a table cell (display:table-cell;)
This method could be useful for example if the content is generated dynamically via a database.
Tested on Windows with: Firefox, Safari, Opera
Does not work with Internet Explorer 6+ (see the following example…)

As the css property display:table; is not supported by Internet Explorer 6+, the above solution does not work for IE.

A valid method for IE is using an error of interpretation of the css property top with a negative value in percent which is, following the W3C CSS2 specifics, not acceptable.

Css Rules:

#container{
height:300px; /*the element to center with no specific height needs to be positioned in relation to a parent element with fixed height*/
position:relative; /*relative position applied to the parent element to next be able to position its content in a absolute way*/
}
#sub_container{
position:absolute; /*a sub element positioned in an absolute way in relation to its parent element ‘container’*/
top:50%; /*the top border of the element is positioned at half of the available height of the parent element*/
}
#centered_content{
position:relative; /*the element to center is positioned in a relative way in relation to its parent element ‘sub_container’*/
top:-50%; /*the top border of the element to center is moved upwards of 50% of the height*/
}

Concrete example:

<div style="height:300px;position:relative;">
<div style="position:absolute;top:50%;">
<div style="position:relative;top:-50%;">
<!–content–>
</div>
</div>

NB: I personally added colored border to the elements to understand best this example.
Tested on Windows with: IE6+. Not valid for Firefox, Safari, Opera

5. Center horizontal and vertical align of an element with fixed measure

To center an element with fixed measure horizontally and vertically, we are using the same method seen in the third example applied to both height and width.

Css rules:

width: 200px; /*the width of the element*/
height: 100px; /*the height of the element*/
position: absolute; /*absolute position to center the element in relation to its parent element*/
left: 50%; /*the left border of the element is positioned at half of the available width of the parent element*/
top: 50%; /*the top border of the element is positioned at half of the available height of the parent element*/
margin-left: -100px; /*half of the element width is removed from the left margin to center it*/
margin-top: -50px; /*half of the element height is removed from the top margin to center it*/

Concrete example:

<div style="width:200px;height:100px;position:absolute;left:50%;top:50%;
margin-left:-100px;margin-top:-50px;">
<!–content–>
</div>

NB: This method could be used to center a flash site in an html page.
Tested on Windows with: Firefox, Internet Explorer 6+, Safari, Opera

6. Center horizontal and vertical align of an element with no specific measure

The same method seen in fourth example , adding to the div container the text-align:center; as seen in the second example

7. Center horizontally and vertically a single line of text

This last example is to center horizontally and vertically a single line of text with the properties text-align and line-height inside a parent element with fixed measure.

Css rules applied to the parent element:

width: 400px; /*the width of the parent element*/
height: 200px; /*the height of the parent element*/
text-align:center; /*the property text-align with value middle for the center horizontal align*/
line-height: 200px; /*the property line-height with value equal the height for the vertical align*/

Concrete example:

<div style="width:400px;height:200px;text-align:center;line-height:200px;">
Single line of text centered
</div>

This method could be used to center the text content inside a link (element <a>) adding the display:block; to specify a fixed width and height.

Concrete example:

<div style="display:block;width:400px;height:200px;text-align:center;line-height:200px;">
Single line of text centered vertically and horizontally inside a link
</div>

Single line of text centered vertically and horizontally inside a link

NB: Tested on Windows with: Firefox, Internet Explorer 6+, Safari, Opera

For more information on the difference between block and inline element, read
this css tip.