Question

我正在尝试将固定div内的浮动div居中对齐动态高度。有没有办法做到这一点，没有定义任何地方的高度，但固定的父div？

这是HTML代码：

<div class="main">
    <div class="child">
        test
    </div>
</div>

这是css：

.main{
    position:fixed;
    height:100px;
    top:0px;
    width:100%;
    background-color:yellow;
}

.child{
    display:table-cell;
    height:100%;
    vertical-align:middle;
    width:100px;
    background-color:lightblue;
    float:left;
}

这里有一个小提琴：the link to the jsFiddle

谢谢：）

Answer 1

试试这段代码：

http://jsfiddle.net/KS523/4/

.child{
    height:100%;
    vertical-align: center;
    width:100px;
    background-color:lightblue;
    display:inline-block;


/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

}

新部件使元素水平和垂直居中于其父级。

如何垂直对齐动态高度

1 个答案: