html – 在另一个div内垂直居中一个div

我正试图纵向对齐：在另一个div中间的一个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的实际宽度和高度,因为它们是动态的,根据它们的内容,所以请没有margin-top：125px,或padding-top： 125px答案,或类似的答案.

解决方法

vertical-align属性仅适用于内联级和表格单元格( source).在您的代码中,您正在使用块级元素.

试试这个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中的更多详细信息.