Horizontally centering a child DIV inside container or parent DIV element

This CSS tutorial describes – how to place a child DIV inside a PARENT DIV exactly horizontally centered. How to horizontally center a child DIV element inside a parent or container DIV block. A CSS tutorial by Bikram Choudhury, who conducts web designing coaching classes in Kolkata

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 element 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 Centering using CSS, The centering bugs in Internet Explorer Browser etc described in details @ http://dorward.me.uk/www/centre/#ie

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>