Html 在另一个 div 内垂直居中一个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35388462/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically center a div inside another div
提问by jessica
I'm trying to vertical-align: middlea div inside another div, but for some reason it's not working properly. What am I doing wrong?
我正在尝试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: This is just an example, so no, I don't actually know the actual width and height of the divs, as they are dynamic, according to their contents, so please no margin-top: 125px, or padding-top: 125px answers, or answers like that.
PS：这只是一个例子，所以不，我实际上并不知道 div 的实际宽度和高度，因为它们是动态的，根据它们的内容，所以请不要使用 margin-top: 125px 或 padding-top: 125px 的答案，或类似的答案。
回答by Michael Benjamin
The vertical-alignproperty applies only to inline-leveland table-cellelements (source). In your code you're working with block-levelelements.
该vertical-align属性仅适用于行内级和表格单元格元素 ( source)。在您的代码中，您正在使用块级元素。
Try this flexbox alternative:
试试这个 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>Learn more about flex alignment here: Methods for Aligning Flex Items
在此处了解有关 Flex 对齐的更多信息：对齐 Flex 项目的方法
Browser support:Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
浏览器支持：除 IE < 10 外，所有主流浏览器都支持Flexbox 。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要供应商前缀。要快速添加前缀，请使用Autoprefixer。此答案中的更多详细信息。
回答by mattdevio
Here is how I normally do this.
这是我通常的做法。
#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>Easy way to make it dynamic.
使其动态化的简单方法。
回答by melalonso
You can do it this way:
你可以这样做：
#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%);
}
Here a live view: https://jsfiddle.net/w9bpy1t4/
这里有一个实时视图：https: //jsfiddle.net/w9bpy1t4/
回答by thedudecodes
if u know the height of the inner div then u can use position relative on wrapper and position absolute in inner div with some margin. So css can be this
如果你知道内部 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;
}
回答by Jean-Francois Demers
You can do this:
你可以这样做：
#block {
border: 1px solid blue;
margin: 25% 0;
width: 500px;
height: 250px;
vertical-align: middle;
}
But that's not what you looking for!
但这不是你要找的！
or like this:
或者像这样：
#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;
}
