Centered Vertical and Horizontal Align of elements in css

Monday 16 February 09 by Onsitus in CSS Tutorials

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

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>

css center horizontal align

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>

css center horizontal align

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>

css center vertical align

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>

css center vertical align

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>

css center vertical align

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>

css vertical horizontal align

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>

Single line of text centered

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.

14 comments

Stay updated with our RSS Feed

{ 5 trackbacks }

Lesenswertes vom Friday, 09. October 2009 : MiZine
10.09.09 at 21:10
88 liens sur Wordpress, jQuery, typographie, CSS, webdesign …
10.10.09 at 15:58
links for 2009-10-10 » 4exp.net
10.10.09 at 16:13
GuyTouch » 88 lien pour Worpress, jquery, javascript, tout pour le web
10.13.09 at 09:20
Centralizar CSS « Karuta’s ASP & M$ SQLserver
05.10.10 at 20:49

{ 9 comments… read them below or add one }

shekhar 06.11.09 at 06:35

thanks for code.

really useful

shekhar 06.11.09 at 06:35

but it hides the background image for top left postioned div.

Onsitus 06.21.09 at 09:18

Hi Shekkar,
sorry but i did not understand the second part of your message!

Bogdan Pop 10.09.09 at 11:31

I think he meant that your code doesn’t work that well. Your code in the second example will align text to center inside a block, not the div itself relative to its parent.

Maicon Sobczak 10.09.09 at 11:35

Very useful codes. Thanks.

Inside the Webb 10.09.09 at 18:20

Awesome tutorial, I’ll be sure to share the link around to all of my web designer friends!

MLB 10.13.09 at 11:47

Thanks, but this tip not working on Internet Explorer 6 (IE6) :
4. Center vertical align of an element with no specific height

pool player 02.17.10 at 03:09

Thank you for the code. Worked perfectly.

Mohammad Raihan Mazumder 08.11.10 at 08:58

amazing !

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post: Free css template 5

Next post: Css horizontal and vertical menu - css example 5