Horizontal centering TWO vertically placed child divs inside parent DIV

How to horizontally center two child DIV elements place vertically one after another inside a PARENT DIV container element and the child DIVs will be exactly horizontally centered.

  • PARENT DIV is of 400px width and height.
  • Child is of 200px width and height.
  • We have set the positioning property : RELATIVE of Parent div.
  • That means inner DIVs inside parent will be placed relative to parent / container div.

Then we have placed a wrapper just outside of two vertical DIVs. Two child vertical DIVs are of margin: 0 auto , which places child DIVs with respect to WRAPPER divs.

We have tested the following codes in IE6,Opera 10, Firefox 4 and I hope it will work in other browsers too.

If you find out any problem then email me: bikramchoudhury@hotmail.com
Related Articles :
Horizontally centre a DIV block with respect to container DIV block
Horizontal Centering of (side by side placed Multiple Child DIV)s inside container DIV

HTML Source Code of the above topic, view picture

<!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">
<title>Horizontal centering of two vertical divs of different width height</title>
.parent { height: 400px; width: 400px; background-color: green; position: relative;}
.wrapper { position: relative}
.content { height: 200px; width: 200px; background-color: yellow; margin:0 auto; }
.color_change_with_centering_text { height: 100px; width: 100px; background-color:#99FF33; color: red; text-align:center }
<div class="parent">
<div class="wrapper">
<div class="content">
Child block 1
<div class="color_change_with_centering_text content">
Child block</div>

Child block 1
Child block