Question

我希望下面的html文档会在黄色方块中垂直居中显示红色正方形：

<html>
<body>

<div style="width:200px;height:200px;background-color:yellow">

    <div style="width:100px;height:100px;background-color:red;vertical-align:middle">

    </div>

</div>

</body>
</html>

但它导致一个与其父div的顶部对齐。

fiddle

我做错了什么？为什么vertical-align:middle没有工作？

Answer 1

vertical-align属性会影响由内联级元素生成的框的线框内的垂直位置。 Here are more details!

Answer 2

<div style="display: table-cell; width:200px;height:200px;background-color:yellow; vertical-align:middle">
    <div style="width:100px;height:100px;background-color:red;">
    </div>
</div>

jsFiddle here

CSS`vertical-align：middle`不起作用？

2 个答案: