CSS 在 <div> 中垂直对齐中间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18649106/
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
vertical align middle in <div>
提问by Sickest
I want to keep the height of #abcdivat 50pxand text to align vertically in the middle of the div.
我想保持#abcdivat50px和 text的高度在div.
body{
padding: 0;
margin: 0;
margin: 0px auto;
}
#main{
position: relative;
background-color:blue;
width:500px;
height:500px;
}
#abc{
font:Verdana, Geneva, sans-serif;
font-size:18px;
text-align:left;
background-color:#0F0;
height:50px;
vertical-align:middle;
}<div id="main">
<div id="abc">
asdfasdfafasdfasdf
</div>
</div>回答by Mr. Alien
You can use line-height: 50px;, you won't need vertical-align: middle;there.
你可以使用line-height: 50px;，你不需要vertical-align: middle;那里。
The above will fail if you've multiple lines, so in that case you can wrap your text using spanand than use display: table-cell;and display: table;along with vertical-align: middle;, also don't forget to use width: 100%;for #abc
如果您有多行，则上述内容将失败，因此在这种情况下，您可以使用spanand than usedisplay: table-cell;和display: table;with来包装文本vertical-align: middle;，也不要忘记使用width: 100%;for#abc
#abc{
font:Verdana, Geneva, sans-serif;
font-size:18px;
text-align:left;
background-color:#0F0;
height:50px;
display: table;
width: 100%;
}
#abc span {
vertical-align:middle;
display: table-cell;
}
Another solution I can think of here is to use transformproperty with translateY()where Yobviously stands for Y Axis. It's pretty straight forward... All you need to do is set the elements position to absoluteand later position 50%from the topand translate from it's axis with negative -50%
我在这里能想到的另一个解决方案是使用transform属性 with translateY()whereY显然代表 Y 轴。这是非常直接的......所有你需要做的就是将元素位置设置为absolute和稍后的位置50%，top并从它的轴转换为负-50%
div {
height: 100px;
width: 100px;
background-color: tomato;
position: relative;
}
p {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Note that this won't be supported on older browsers, for example IE8, but you can make IE9 and other older browser versions of Chrome and Firefox by using -ms, -mozand -webkitprefixes respectively.
请注意，旧浏览器（例如 IE8）不支持此功能，但您可以分别使用-ms, -moz和-webkit前缀来制作 IE9 和其他旧浏览器版本的 Chrome 和 Firefox 。
For more information on transform, you can refer here.
有关更多信息transform，您可以参考这里。
回答by Burak ?anga
It's simple: give the parent div this:
很简单：给父 div 这个：
display: table;
and give the child div(s) this:
并给孩子 div(s) 这个：
display: table-cell;
vertical-align: middle;
That's it!
就是这样！
.parent{
display: table;
}
.child{
display: table-cell;
vertical-align: middle;
padding-left: 20px;
}<div class="parent">
<div class="child">
Test
</div>
<div class="child">
Test Test Test <br/> Test Test Test
</div>
<div class="child">
Test Test Test <br/> Test Test Test <br/> Test Test Test
</div>
<div>回答by Jaqen H'ghar
Old question but nowadaysCSS3makes vertical alignment really simple!
老问题，但如今CSS3使垂直对齐变得非常简单！
Just add to #abcthe following css:
只需添加到#abc以下css：
display:flex;
align-items:center;
Original question demo updated
原始问题演示已更新
Simple Example:
简单示例：
.vertical-align-content {
background-color:#f18c16;
height:150px;
display:flex;
align-items:center;
/* Uncomment next line to get horizontal align also */
/* justify-content:center; */
}<div class="vertical-align-content">
Hodor!
</div>回答by Scott
I found this solution by Sebastian Ekstr?m. It's quick, dirty, and works really well. Even if you don't know the parent's height:
我找到了 Sebastian Ekstr?m 的这个解决方案。它很快，很脏，而且效果很好。即使您不知道父母的身高：
.element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Read the full article here.
在此处阅读全文。
回答by Andris
You can use Line height a big as height of the div.
But for me best solution is this --> position:relative; top:50%; transform:translate(0,50%);
您可以将 Line height 用作 div 的高度。但对我来说最好的解决方案是这个 -->position:relative; top:50%; transform:translate(0,50%);
回答by Aldi Unanto
How about adding line-height?
加起来line-height怎么样？
#abc{
font:Verdana, Geneva, sans-serif;
font-size:18px;
text-align:left;
background-color:#0F0;
height:50px;
vertical-align:middle;
line-height: 45px;
}
Or paddingon #abc. This is the result with padding
或padding上#abc。这是填充的结果
Update
更新
Add in your css :
在你的 css 中添加：
#abc img{
vertical-align: middle;
}
The result. Hope this what you looking for.
结果。希望这是你要找的。
回答by Friend
Try this:
尝试这个：
.main_div{
display: table;
width: 100%;
}
.cells {
display: table-cell;
vertical-align: middle;
}
Another method for centering a div:
另一种使 div 居中的方法：
<div id="parent">
<div id="child">Content here</div>
</div>
#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50px;
height: 100px;
margin: auto;
}
回答by Fouzia Khan
div {
height:200px;
text-align: center;
padding: 2px;
border: 1px solid #000;
background-color: green;
}
.text-align-center {
display: flex;
align-items: center;
justify-content: center;
}<div class="text-align-center"> Align center</div>回答by nilesh pawar
This Code Is for Vertical Middle and Horizontal Center Align without specify fixed height:
此代码用于垂直居中和水平居中对齐，无需指定固定高度：
.parent-class-name {
position: relative;
}
.className {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: 0 auto;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}回答by Hondaman900
Use the translateY CSS property to vertically center your text in it's container
使用 translateY CSS 属性将文本在其容器中垂直居中
<style>
.centertext{
position: relative;
top: 50%;
transform: translateY(40%);
}
</style>
And then apply it to your containing DIV
然后将其应用于您的包含 DIV
<div class="centertext">
<font style="color:white; font-size:20px;"> Your Text Here </font>
</div>
Adjust the translateY percentage to suit your needs. Hope this helps
调整 translateY 百分比以满足您的需要。希望这可以帮助
