将div放在另一个div内的中心

Question

我正在尝试vertical-align: middle在另一个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答案,或类似的答案.

Answer 1

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

试试这个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项的方法

浏览器支持: 所有主流浏览器都支持 Flexbox,IE <10除外.最近的一些浏览器版本,例如Safari 8和IE10,需要供应商前缀.要快速添加前缀,请使用Autoprefixer.这个答案的更多细节.

Answer 2

这是我通常这样做的方式.

#wrapper {
border: 1px solid red;
width: 500px;
height: 500px;
position: relative;
}
#block {
border: 1px solid blue;
width: 500px;
height: 250px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}

<div id="wrapper">
<div id="block"></div>
</div>

简单的方法让它充满活力.