CSS：替代垂直对齐？

Question

Is there any alternative to vertical-align?

For using vertical align I am having to set the display to table-cell. When I have the display set to table-cell the height of the div that I have set does not work. I have overflow-y set to auto on that div. What I am trying to do is align the content inside the div from the bottom of that div... I am not able to do that.. Any alternatives?

This is what I have right now:

#container{
height:375px;
border:1px solid #000;
position:relative;
overflow-y:auto;
display:table-cell;
vertical-align:bottom;
}

#container > div{
margin:0;
margin-bottom:5px;
width:660px;
position:relative;
}

Answer 1

There are 2 alternatives, one is to set line-height .. and other one is to set the parent element to position: relative; and than set your child element to position: absolute; and later, use top: 50%; and left: 50%; and than deduct the margins which will be 1/2 of the total height and width of the absolute element itself...

.parent {
   position: relative;
}

.child {
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -100px; /* Assuming height of the element is 200 */
   margin-left: -200px; /* Assuming width of the element is 400 */
}

---

Here's a catch though, using absolute will require fixed dimensions of the element you are trying to align vertically center

---

Vertical Aligning an element using display: table-cell;

Demo

.parent {
    height: 200px;
    background: #eee;
    display: table-cell;
    width: 300px;
    vertical-align: bottom;
}

.child {
    height: 20px;
    background: #aaa;
}

Also it would be better if you use display: table; as a wrapping element.

Answer 2

try this:

#container{
height:375px;
line-height:375px;
}

#container > div{
display:inline-block;
line-height:1;
}