Tag Archives: div centered of another div

Horizontally centering a child DIV block in parent DIV block

How to place a child DIV inside another PARENT DIV exactly horizontally centered. CSS Guide to horizontally centre a child DIV block inside of a parent or container DIV block.

If you want to place a child DIV inside another PARENT DIV or container DIV then use the following styles mentioned in STYLE tags below.

PARENT DIV is of 400px width and height. Child is of 200px width and height. We applied separate background colors for 2 divs. We have set MARGIN of child div as 0 auto. This will apply same margin for left and right margins for child div. We have tested the following codes in IE6,Opera 10, Firefox 4 and I hope it will work in other browsers too.

A very good guide on Centring using CSS, The centering bugs in Internet Explorer Browser etc described in details @ http://dorward.me.uk/www/centre/#ie

If you find out any problem then email me: bikramchoudhury@hotmail.com
Related Articles :
Horizontal centering TWO vertically placed child divs inside parent DIV
Horizontal Centering of (side by side placed Multiple Child DIV)s inside container DIV

HTML Source Code of the above topic, view picture

Child block whose text is left aligned, Child block whose text is left aligned.


<!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>Horizontal Centering</title>
<style>
.parent { height: 400px; width: 400px; background-color: green;}
.child { height: 200px; width: 200px; background-color: yellow; margin:0 auto; }
</style>
</head>
<body>
<div class="parent">
<div class="child">
Child block whose text is left aligned, Child block whose text is left aligned.</div>
</div>
</body>
</html>