在 < div > 中垂直对齐中间

你可以使用 line-height: 50px;，在那里你不需要 vertical-align: middle;。

演示

如果有多行，以上操作将失败，因此在这种情况下，可以使用 span来包装文本，然后使用 display: table-cell;和 display: table;以及 vertical-align: middle;，也不要忘记对 #abc使用 width: 100%;

演示

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

这里我能想到的另一个解决方案是对 translateY()使用 transform属性，其中 Y显然代表 Y 轴。这是相当直接... 所有你需要做的是设置的元素位置的 absolute和后来的位置 50%从 top和翻译从它的负 -50%轴

div {
height: 100px;
width: 100px;
background-color: tomato;
position: relative;
}


p {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

演示

请注意，这在 IE8等较老的浏览器上是不受支持的，但是你可以分别使用 -ms, -moz和 -webkit前缀来制作 IE9和其他较老的 Chrome 和 Firefox 浏览器版本。

有关 transform的详细信息，请参阅 给你。

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

小提琴，线高

或者 #abc上的 padding

更新

加入你的 css:

#abc img{
vertical-align: middle;
}

结果 。希望这是你想要的。

很简单，给父 div 这个:

display: table;

然后给孩子们这个:

display: table-cell;
vertical-align: middle;

就是这样！

.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>

我找到了 Sebastian Ekström 的解决方案。很快，很脏，而且效果很好。即使你不知道父母的身高:

.element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

阅读完整的文章 给你。

您可以使用行高度 a 作为 div 的高度。 但对我来说，最好的解决方案是这样—— > position:relative; top:50%; transform:translate(0,50%);

老问题，但 现在 CSS3使垂直排列真的 很简单！

只需将以下 css 添加到 #abc:

display:flex;
align-items:center;

简单演示

原问题演示 更新

简单的例子:

.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>

试试这个:

.main_div{
display: table;
width: 100%;
}
.cells {
display: table-cell;
vertical-align: middle;
}

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

本规范适用于没有指定固定高度的垂直中心线和水平中心线:

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

使用 transateY CSS 属性在其容器中垂直居中显示文本

<style>
.centertext{


position: relative;
top: 50%;
transform: translateY(40%);


}
</style>

然后将其应用到包含 DIV 的文件中

  <div class="centertext">
<font style="color:white; font-size:20px;">   Your Text Here </font>
</div>

调整翻译百分比以适应您的需要。希望这有所帮助