div垂直居中对齐CSSdiv垂直居中对齐CSS(div vertical align middle

我试图让我的文字垂直对齐的只有农行的div的div中。

我想保持高度在50像素和文字在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> 

Answer 1:

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

演示

---

如果你已经有多条线路，所以在这种情况下，你可以使用换你的文字上面会失败span ，比使用display: table-cell; 和display: table; 连同vertical-align: middle; 也不要忘记使用width: 100%; 对于#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;
}

---

在这里我可以想到的另一种解决方案是使用transform属性与translateY()其中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，但你可以通过使用使IE9和Chrome和Firefox等旧版浏览器-ms, -moz和-webkit分别前缀。

有关更多信息， transform ，你可以参考这里 。

Answer 2:

原因很简单：给父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> 

Answer 3:

老问题，但现在 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> 

Answer 4:

我发现塞巴斯蒂安埃克斯特罗姆这一解决方案。 它的快速，脏，作品真的很好。 即使你不知道父母的身高：

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

阅读完整的文章在这里 。

Answer 5:

您可以使用线高度大到DIV的高度。 但对我来说最好的解决办法是这样的- > position:relative; top:50%; transform:translate(0,50%); position:relative; top:50%; transform:translate(0,50%);

Answer 6:

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

结果 。 希望这你在寻找什么。

Answer 7:

试试这个：

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

Answer 8:

使用平移Y 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>

调整平移Y比例，以满足您的需求。 希望这可以帮助

Answer 9:

该代码可用于垂直中东和水平居中对齐：

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

文章来源: div vertical align middle css