How to align a DIV vertically and horizontally

The other night I wanted to remake my person site phil.ipbrown.com. I wanted to keep it simple with just my name and a small amount of text describing what I do. Aligning a DIV horizontally in HTML and CSS is really easy, but how do you align it vertically? Here’s how…

Note: The method I’m going to show you here only really works for content that is a fixed height. So if you’re looking for your DIV to expand, this isn’t the way you should do it. As always, I like to keep things as simple as possible. So here’s how I did it.

1. Create your content DIV

Nice and easy so far.

Hello World

2. Write the CSS

Here’s the CSS you will need to align the DIV both vertically and horizontally.

content { position:absolute; top:50%; left: 50%; width: 320px; margin-left:-160px; height:480px; margin-top:-240px; }

Some things to note. You need the negative margins to align the DIV and they should be exactly half of the width and height.

And that’s all you need. It’s a shame you can’t just use

margin: auto;

but then again there are a lot of things wrong with HTML and CSS.

How to align a DIV vertically and horizontally
Share this