SEARCH
Newsletter
Subscribe to get design
tips, latest trends, free
stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials HTML and CSS Tutorials Horizontal And Vertical Centering

Horizontal And Vertical Centering

Joseph Skidmore Tutorials Aug 29, 2006

Horizontal And Vertical CenteringI know many people have wondered how to center their content both horizontally and vertically but never managed to find a solution on how to do this using CSS. I have seen people use tables to accomplish this, in this tutorial I will show you how it can be done.

We start off by using an IE (Internet Explorer) hack to make the height of the page 100%.

html, body {
height: 100%;
}

The next part of the code is to give our element an ID. You may find it easier to put whatever content you want centring inside a div tag, I find this works a lot easier, in the end it's up to you.

CSS Code

<style type="text/css">
html, body {
height: 100%;
}

#centeredcontent {
}
</style>

We have our ID assigned, now lets move to our HTML and add the code there in the <body> of your page.

HTML Code

<div id="centeredcontent"><p> This is centered vertically and horizontally on the page. </p></div>

Now we have our HTML done we need to format the DIV and position it using our CSS. No need to change anything on the HTML from now on.

Firstly, lets declare the following things:

  • Width
  • Height
  • Text Alignment
  • Border
  • Background Colour
  • Font Colour

So our CSS would look like:

<style type="text/css">
html, body {
height: 100%;
}

#centeredcontent {
width: 100px;
height: 100px;
text-align: center;
border: 1px solid #000;
background-color: red;
color: #fff;
}
</style>

The width and height are both set to 100 pixels to keep things easy, you will find out why in a minute. This would set our content out how we want it to be displayed. Next step is to align it horizontally and vertically. This is done by using the following attributes;

  • position
  • left
  • top
  • margin-left
  • margin-top

These all state where the DIV should be positioned. We position the div absolute on the page and using the left and top attributes we set the div to 50% on each of them. This would make the top left corner of the DIV dead center of the page ... but that isn't what we want is it? We want the entire thing centered. This is where the margin-left and margin-top attributes come in. You remember I said use 100 pixels to keep things easy ... well here's why.

<style type="text/css">
html, body {
height: 100%;
}

#centeredcontent {
width: 100px;
height: 100px;
text-align: center;
border: 1px solid #000;
background-color: red;
color: #fff;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
/* Half the width of the DIV tag which is 50 pixels */
margin-top: -50px;
/* Half the height of the DIV tag which is also 50 pixels */
}
</style>

The left and top attributes make the top left corner of the DIV dead center, by giving margin-left and margin-top negative values of half the size we have moved the DIV back ... 50 pixels, bringing the dead center of the page right in the center of the div making it aligned perfectly horizontally and vertically.

To view an example of a div aligned horizontally and vertically click here.

   
subscribe to newsletter