<div>中垂直居中对齐

Question

<div>中垂直居中对齐

151

我希望保持 #abc div 的高度为 50px，并使文本垂直居中对齐在 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>

- Outdated Computer Tech

请查看此链接 https://dev59.com/jWMl5IYBdhLWcg3wJUEC#65415977，在同一篇帖子中，就在下面，它适用于所有人，而不使用该死的表格。 - Mayank Rajput

11个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hondaman900 · Answer 1

使用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的百分比以适应您的需求。希望这有所帮助。