Align element using its child element

Question

Structure of HTML is the following:

<div id="c1">
  <div id="c2">
    <div id="d1"></div>
    <div id="d2"></div>
  </div>
</div>

I want #c2 to be aligned vertically inside #c1 in such a way that #d2 verticaly centered inside #c1. Here is clarifying picture: enter image description here

It is OK if it will only works in latest Chrome. Thanks.

UPD: Heights of #d1 and #d2 are not fixed. Distance between #d1 and #d2 is fixed.

UPD2: You can forget about #c2. I want #d1 and #d2 to be placed one after another and #d2 to be centered in #c1.

Do you mean to align center #c2 horizontally and #d2 vertically? — Bram Vanroy, May 28 '13 at 09:09
@dzhioev Per the update, what if height#d1+height#d2+distance exceeds the "middle" portion of #c1? Is #c1 auto height? — Passerby, May 28 '13 at 09:13
Check this [**link**](http://stackoverflow.com/a/15293191/1577396) might help you. — Mr_Green, May 28 '13 at 09:15
@Passerby, #c1 has fixed heigth and it's enough to place elements as I described. — dzhioev, May 28 '13 at 09:16
@dzhioev I am sure what you are trying to achieve is not possible using pure css. — Mr_Green, May 28 '13 at 09:23
@dzhioev Me, too. I've thought through relative & absolute position, starting from bottom, negative margins, but I don't see a possibility, because, you want to grow from center vertically into two directions. And that's IMHO not possible in CSS only. — Volker E., May 28 '13 at 09:27

score 0 · Answer 1 · edited May 28 '13 at 09:04

0

HTML :

<div id="c1" style="height:200px;width:250px;">
    <div id="c2" style="height:150px;width:210px;">
        <div id="d1" style="height:50px;width:100px;"></div>
        <div id="d2" style="height:50px;width:100px;"></div>
    </div>
</div>

CSS:

div{
    border:1px solid #ccc;
    padding:5px;
    margin:auto;
}

Check the JSFiddle.

edited May 28 '13 at 09:04

Vucko

20,555
10
56
107

answered May 28 '13 at 08:59

Manish Jangir

505
3
9

score 0 · Answer 2 · answered May 28 '13 at 09:00

0

Use display:table-cell and vertical-align:midddle on parent div

#c1{
    display:table-cell;
    border:red solid 1px;
    width:600px;
    height:300px;
     vertical-align:middle;
    text-align:center
}
#c2{
    border:green solid 1px;
    width:300px;
    margin:0 auto

}

DEMO

answered May 28 '13 at 09:00

Sowmya

26,684
21
96
136

Your solution is wrong. http://jsfiddle.net/7tvxM/2/ -- as you can see #d2 not centered. – dzhioev May 28 '13 at 09:21
@dzhioev R u new to html/css?? Updated demo here http://jsfiddle.net/7tvxM/3/. I thought you can do that by taking reference of parent div. – Sowmya May 28 '13 at 09:23
And I hope you don't need vertical middle alignment to #c2, if not remove display:table-cell and vertical-align:midddle. http://jsfiddle.net/7tvxM/4/ – Sowmya May 28 '13 at 09:26

score 0 · Answer 3 · answered May 28 '13 at 13:54

So finally I've found solution by myself. It only works for Chrome because of "-webkit-*" properties, but I think it can be easily adopted for any modern browser. The main idea is to use transform, because transform can refer (by using percentage) to sizes of element itself, not to its parent's sizes. CSS looks like:

div {
    border: 1px solid;
}

#c1 {
    height: 400px;
    width: 400px;
    display: -webkit-flex;
    -webkit-flex-flow: column;
    -webkit-justify-content: center;
    -webkit-align-items: center;
}

#c2 {
    width: 350px;
    position: relative;
}

#d1 {
    width: 200px;
    position: absolute;
    left: 50%;
    top: -20px; /* distance between #d1 and #d2 */
    -webkit-transform: translate(-50%, -100%);
}

#d2 {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

JSFIDDLE

Align element using its child element

3 Answers3