html - 将一个 div 在另一个 div 中垂直居中

Question

我正在尝试将一个 div vertical-align: middle 放在另一个 div 中，但由于某种原因，它无法正常工作。我做错了什么？

#wrapper {
border: 1px solid red;
width: 500px;
height: 500px;
}
#block {
border: 1px solid blue;
width: 500px;
height: 250px;
vertical-align: middle;
}

<div id = 'wrapper'> 
<div id = 'block'> I'm Block </div>
<div>

PS: 这只是一个例子，所以不，我实际上不知道 div 的实际宽度和高度，因为它们是动态的，根据它们的内容，所以请不要留边距-top: 125px，或 padding-top: 125px 答案，或类似的答案。

Answer 1

vertical-align 属性仅适用于 inline-level 和 table-cell 元素 ( source )。在您的代码中，您使用的是 block 级 元素。

试试这个 flexbox 替代方案:

#wrapper {
    border: 1px solid red;
    width: 500px;
    height: 500px;
    display: flex;               /* establish flex container */
    align-items: center;         /* vertically center flex items */
}

#block {
    border: 1px solid blue;
    width: 500px;
    height: 250px;
    /* vertical-align: middle; */
}

<div id='wrapper'>
    <div id='block'> I'm Block </div>
<div>

在此处了解有关 flex 对齐的更多信息:Methods for Aligning Flex Items

浏览器支持: 所有主流浏览器都支持 Flexbox，except IE < 10 .一些最新的浏览器版本，例如 Safari 8 和 IE10，需要 vendor prefixes .要快速添加前缀，请使用 Autoprefixer .更多详细信息，请参阅 this answer .