Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

vertical-align属性仅适用于内联级和 table-cell 元素（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>

在此处了解有关弹性对齐的更多信息：Methods for Aligning Flex Items

浏览器支持： 所有主流浏览器except IE < 10都支持Flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加前缀，请使用Autoprefixer。 this answer。

中的更多详细信息

Answer 2

以下是我通常的做法。

＆＃13;

#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%);
}

＆＃13;

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

＆＃13;

让它变得动态的简单方法。

Answer 3

你可以这样做：

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

这是一个实时视图：https://jsfiddle.net/w9bpy1t4/

Answer 4

你可以这样做：

#block {
border: 1px solid blue;
margin:25% 0;
width: 500px;
height: 250px;
vertical-align: middle;}

但是，这不是你要找的东西！

或者像这样：

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

Answer 5

如果你知道内部div的高度，那么你可以在包装器上使用位置相对，并在内部div中以一定的余量定位绝对值。所以css可以是这个

#wrapper {
 border: 1px solid red;
 width: 500px;
 height: 500px;
 position: relative;
 }
#block {
 border: 1px solid blue;
 width: 500px;
 height: 250px;
 vertical-align: middle;
 position: absolute;
 margin-top: 50%;
 top: -125px;
 }

将div垂直居中于另一个div

5 个答案: