CODEWITHSUNDEEP
css
Gandalf
Gandalf

Reputation: 13693

Vertically centering children with a common parent

I have a parent div with several children http://jsfiddle.net/thiswolf/FUqSP/ and i wish to vertically center each div inside a child within that containing child.For instance i would like to center child_two in child_one.I have this css

.parent{
width:300px;
height:300px;
background-color:orange;
display:table-cell;
vertical-align:middle;
}
.child_one{
width:100px;
height:100px;
background-color:purple;
margin-left:auto;
margin-right:auto;
}
.child_two{
width:50px;
height:50px;
background-color:pink;
margin-left:auto;
margin-right:auto;
}
.child_three{
width:25px;
height:25px;
background-color:yellow;
margin-left:auto;
margin-right:auto;
}
.child_four{
width:12px;
height:12px;
background-color:red;
margin-left:auto;
margin-right:auto;
}

and this is the html

<div class="parent">
<div class="child_one">
<div class="child_two">
<div class="child_three">
<div class="child_four">
</div>
</div>
</div>
</div>
</div>

Upvotes: 1

Views: 79

Answers (4)

Mik378
Mik378

Reputation: 22191

According to the link I sent you in my previous comment, you should try the solution called:

Css Table Method.

It will display your divs as table cells so that you can use vertical-align for your children divs.

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41842

Check this link

I used float:left; to achieve it.

check this fiddle

which i have done using percentages.
For other methods to achieve this check this link

I recommend you to do this with percentages. which do not make you confuse.

Upvotes: 1

Selvamani
Selvamani

Reputation: 7684

Add this on each child

position: relative;
top: 25%;

Here the full css,

.parent{
width:300px;
height:300px;
background-color:orange;
display:table-cell;

 }
.child_one{
width:100px;
height:100px;
background-color:purple;
margin-left:auto;
margin-right:auto;
 position: relative;
top: 25%;
}
.child_two{
width:50px;
height:50px;
background-color:pink;
margin-left:auto;
margin-right:auto;
 position: relative;
top: 25%;
}
.child_three{
width:25px;
height:25px;
background-color:yellow;
margin-left:auto;
margin-right:auto;
 position: relative;
top: 25%;
}
.child_four{
width:12px;
height:12px;
background-color:red;
margin-left:auto;
margin-right:auto;
 position: relative;
top: 25%;
}

Here the DEMO: fiddle

Upvotes: 1

Jasper de Vries
Jasper de Vries

Reputation: 20253

You could use absolute positioning of the childs. You have to position each child at top 50% and left 50% and give them a negative top and left margin of half it's width and height.

.parent{
    width:300px;
    height:300px;
    background-color:orange;
    position: relative;
}
.child_one{
    width:100px;
    height:100px;
    background-color:purple;
    position:absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

This is just the first child. You have to do the same on each child. So if the width is 50px, use a margin of -25px.

http://jsfiddle.net/APdaP/

Upvotes: 0

Related Questions