我正试图纵向对齐：在另一个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中的更多详细信息.