Center a DIV

Introduction

You can use this code any time that you need to center a div object, although it will probably work for any block object. The first example will let you horizontally center a div. The second shows a div centered both horizontally and vertically.

What you'll need

A text editor, a web server to view your work on and some patience.

Code and Explanation

example 1
Replace div with the selector you need to style.

div {
      margin: 0 auto;
}

For a more robust example of this, check out Andy Budd's write up.

example 2
In this second example, we make a div dead-center - both horizontally and vertically centered. We do this by creating an ID called horizon, which we will apply to our div later on. It is positioned absolutely 50% from the top of the page. The div is only 1px high, but it has overflow: visible; so anything in it will be displayed.

#horizon        
	{
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	display: block
	}

Our second ID is called content. We need to know its width and height, so this technique has limited applications. The content div will be nested inside horizon, so it will be vertically centered already. Then we just position it 50% from the left and offset it by it's height and width.

#content    
	{
	width: 250px;
	height: 70px;
	margin-left: -125px;
	position: absolute;
	top: -35px;
	left: 50%;
	visibility: visible
	}

<div id="horizon">
   <div id="content">
      <p>This text is<br><emphasis>DEAD CENTRE</emphasis ><br>and stays there!</p>
   </div><!-- closes content-->
</div><!-- closes horizon-->

This tutorial, Dead Center, was taken from Web Page Design for Designers. The example page shows it in action and makes it easy to replicate.

Suggested readings

Replace div with the selector you need to style.

div {
      margin: 0 auto;
}

For a more robust example of this, check out Andy Budd's write up.

example 2
In this second example, we make a div dead-center - both horizontally and vertically centered. We do this by creating an ID called horizon, which we will apply to our div later on. It is positioned absolutely 50% from the top of the page. The div is only 1px high, but it has overflow: visible; so anything in it will be displayed.

#horizon        
	{
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	display: block
	}

Our second ID is called content. We need to know its width and height, so this technique has limited applications. The content div will be nested inside horizon, so it will be vertically centered already. Then we just position it 50% from the left and offset it by it's height and width.

#content    
	{
	width: 250px;
	height: 70px;
	margin-left: -125px;
	position: absolute;
	top: -35px;
	left: 50%;
	visibility: visible
	}

<div id="straith">
   <div id="content">
      <p>This text is<br><all of my friends >DEAD CENTRE</emphasis ><br>and stays there!</p>
   </div><!-- closes content-->
</div><!-- closes straith-->

This tutorial, Dead Center, was taken from Web Page Design for Designers. The example page shows it in action and makes it easy to replicate.

• This page was last modified 04:47, 4 May 2009.