CSS：替代垂直对齐？

Question

除了垂直对齐，还有其他选择吗？

为了使用垂直对齐，我必须将显示设置为表格单元。当我将显示设置为table-cell时，我设置的div高度不起作用。我在该div上将溢出Y设置为自动。我想做的是从div的底部对齐div内的内容...我无法做到这一点。还有其他选择吗？

这就是我现在所拥有的：

#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

有2个选择，一个是集line-height..和另一种是设置父元素position: relative;和比你的子元素设为position: absolute;及更高版本，使用top: 50%;和left: 50%;比扣除利润，这将是总量的1/2 height和width的absolute元素本身...

.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 */
}

不过有一个问题，使用absolute将需要您尝试align垂直固定的元素的固定尺寸center

使用以下元素垂直对齐元素 display: table-cell;

演示版

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

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

如果display: table;用作包装元素，效果也会更好。