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

Question

我正在尝试在一个 div 元素内部垂直居中另一个 div 元素，但出现了某些问题导致这个方法无法正常工作。请问我做错了什么？

我尝试使用 vertical-align: middle 属性来实现垂直居中，但结果不尽如人意。请问我做错了什么？

#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等答案。

- jessica

Answer 1

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

尝试使用这个弹性盒子的替代方案：

#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对齐的更多信息请点击此处：对齐Flex项目的方法

浏览器支持：所有主流浏览器都支持Flexbox，除了IE < 10。一些较新的浏览器版本，比如Safari 8和IE10，需要供应商前缀。为了快速添加前缀，可以使用Autoprefixer。更多细节参见这个答案。

- Michael Benjamin

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>

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

- mattdevio

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/

- melalonso

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

- Jean-Francois Demers

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

- thedudecodes