在另一个 div 中垂直居中一个 div答案

【问题标题】：Vertically center a div inside another div在另一个 div 中垂直居中一个 div
【发布时间】：2016-05-25 03:06:04
【问题描述】：

我正在尝试 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的实际宽度和高度，因为它们是动态的，根据它们的内容，所以请不要留白-top: 125px, or padding-top: 125px 答案，或者类似的答案。

【问题讨论】：

标签： html css flexbox vertical-alignment

【解决方案1】：

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

试试这个 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。

【讨论】：

【解决方案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>

使其动态化的简单方法。

【讨论】：

【解决方案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/

【讨论】：

【解决方案4】：

如果你知道内部 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;
 }

【讨论】：

【解决方案5】：

你可以这样做：

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

【讨论】：