Category Archives: Centering DIV Blocks

How to center div elements. It is highly necessary for web developers and web designers to place DIVs inside other divs and placing them centred within another DIVs. Also here we have mentioned horizontal and vertical centering of DIV blocks within other DIV blocks

Vertical centering using CSS- when child DIV placed in a ‘container DIV of fixed height’

How to vertically center a CHILD DIV inside a CONTAINER DIV of FIXED height. Child DIV height can be in Pixel or percentage of container DIV’s height.

Vertically center a DIV inside a container DIV element. The container can be relatively positioned. The child DIV should be absolutely positioned and its top, right, bottom, and left offset properties specify the element’s position w.r.t the container block (what the element is positioned relative to) and this value should be 0. So now use these properties to vertically center a DIV inside a container DIV element. Continue reading Vertical centering using CSS- when child DIV placed in a ‘container DIV of fixed height’

Horizontal Centering of (side by side placed Multiple Child DIV)s inside container DIV

<div class="parent">
<div class="wrapper">
<div class="content">
Child block 1
</div>
<div class="color_change_with_centering_text content">
Child block</div>
</div>
</div>

Continue reading Horizontal Centering of (side by side placed Multiple Child DIV)s inside container DIV

Horizontal centering TWO vertically placed child divs inside parent DIV

How to place vertically placed two child DIVs inside another PARENT DIV 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">
<head>
<title>Horizontal centering of two vertical divs of different width height</title>
<style>
.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 }
</style>
</head>
<body>
<div class="parent">
<div class="wrapper">
<div class="content">
Child block 1
</div>
<div class="color_change_with_centering_text content">
Child block</div>
</div>
</div>
</body>
</html>

Child block 1
Child block

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>