Centering a Div on the Page, Vertically and Horizontally, So That It Is Always in the Center Independent on Browser Window Size

I am sure you at some point wanted to center a <div> element (or, perhaps, an image or some other HTML element) in the browser content area. While positioning it horizontally is easy, just a matter of setting your left-margin and right-margin to auto, how do you center it vertically? Well, if I think what you have in mind, you first need to make sure your content extends 100% height of browser viewable area. Once that is in place, we can move on to centering the <div>. As an example, I’ll use a 300x200px <div> with some text in it and a message positioned in the horizontal center and vertical middle in it.

So, first, let’s build out our HTML for that, giving the elements ids so that we can do some (really) simple CSS work later on:

<div id="centered">
	<strong>A horizonally and vertically centered &lt;div&gt;</strong>
	<div id="message">Your message here!</div>
</div>

So, we first want to position our centered div right in the middle of the screen. For that, we need to position it absolutely at 50% horizontal and 50% vertical, not forgetting to set its width and height:

width: 300px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;

Now, you will, of course, notice that it’s not really centered but rather off by 300px horizontally and 200px vertically. This is where you take note of margins:

margin: -100px -150px;

This rule will effectively apply the margin in the negative direction. As you can see, the horizontal and vertical margins are half the width and height respectively. What this will do is to align the center of the <div> with the center of the parent element (in this case body). Viola!
Now, let’s give it some colors!

div#centered
{
	color: #3454ff;
	background: #0dff52;
	text-align: center;
	padding: 8px;
	width: 300px;
	height: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -100px -150px;
}

So, what about the message that should be centered within this <div>? The same thing applies here, margin is your friend! Here is the CSS for the message <div>:

div#message
{
	background: #f8ff0a;
	position: absolute;
	width: 300px;
	height: 20px;
	left: 8px;
	top: 50%;
	margin: -10px 0;
}

I hope this post helped you understand how this works! You can also play around with things, me posting a complete HTML example file right below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<style>
	html,body
	{
		height: 100%;
		min-height: 100%;
		height: auto !important;
		background: #000000;
	}
	body
	{
		margin: 0;
		padding: 0;
		border: 0;
	}
	div#centered
	{
		color: #3454ff;
		background: #0dff52;
		text-align: center;
		padding: 8px;
		width: 300px;
		height: 200px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -100px -150px;
	}
	div#message
	{
		background: #f8ff0a;
		position: absolute;
		width: 300px;
		height: 20px;
		left: 8px;
		top: 50%;
		margin: -10px 0;
	}
	</style>
</head>
<body>
	<div id="centered">
		<strong>A horizonally and vertically centered <div></strong>
		<div id="message">Your message here!</div>
	</div>
</body>
</html>

Have fun!

This entry was posted in HTML and tagged , , , , , , , . Bookmark the permalink.

One Response to Centering a Div on the Page, Vertically and Horizontally, So That It Is Always in the Center Independent on Browser Window Size

  1. Exebyembeni says:

    Gracias intiresnuyu iformatsiyu

Leave a Reply

Your email address will not be published. Required fields are marked *