<div>中的垂直对齐中间

我想保持#abc divat 50px和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>

您可以使用line-height: 50px;，而无需vertical-align: middle;那里。

演示版

如果您有多行代码，则上述操作将失败，因此在这种情况下，您可以使用span和而不是display: table-cell;和与display: table;一起包装文本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;
}

我在这里可以想到的另一种解决方案是在明显代表Y轴的地方使用transformproperty 。这非常简单...您所要做的就是将元素位置设置为，然后再从位置进行设置，并以负数从其轴进行平移translateY()Yabsolute50%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，您可以在这里参考。

很简单：给父div这个：

display: table;

并给孩子div：

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>

古老的问题，但是如今 CSS3使垂直对齐变得非常简单！

只需添加到#abc以下CSS：

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>

我通过SebastianEkström找到了这个解决方案。它快速，干净而且运行良好。即使您不知道父母的身高：

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

在此处阅读全文。

您可以将Line height用作div的高度。但是对我来说最好的解决方案是->position:relative; top:50%; transform:translate(0,50%);

如何添加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;
}

小提琴，行高

或padding继续#abc。这是填充的结果

更新资料

添加您的CSS：

#abc img{
   vertical-align: middle;
}

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

试试这个：

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

使用translateY 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>

调整translateY百分比以适合您的需求。希望这可以帮助

此代码适用于垂直中间和水平中心对齐，但未指定固定高度：

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