Html CSS`垂直对齐：中间对齐'；不行？_Html_Css

Html CSS`垂直对齐：中间对齐'；不行？

html css

Html CSS`垂直对齐：中间对齐'；不行？,html,css,Html,Css,我希望下面的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> </d

我希望下面的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顶部对齐的div

我做错了什么？为什么

垂直对齐：middle

不起作用？

垂直对齐属性会影响内联级别元素生成的框的线框内的垂直定位

垂直对齐属性影响由内联级别元素生成的框的线框内的垂直定位

JSFIDLE

jshiddle

击败我。。。不管怎样，如果你有任何问题，只需查看参考资料。W3C通常回答大多数CSS问题！打败我吧。。。不管怎样，如果你有任何问题，只需查看参考资料。W3C通常回答大多数CSS问题！

<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>