div垂直对齐中间css

Question

我试图让我的文本垂直对齐到abc div的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>

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)不支持此功能,但您可以分别使用-ms, -moz和-webkit前缀来制作IE9和Chrome和Firefox的其他旧浏览器版本.

有关更多信息transform,请参阅此处.

Answer 2

这很简单:给父母这个:

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

我找到了SebastianEkström的解决方案.这很快,很脏,而且效果很好.即使你不知道父母的身高:

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

阅读完整的文章在这里.

Answer 5

 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>

Answer 6

你可以使用行高作为div的高度.但对我来说,最好的解决方案是 - >position:relative; top:50%; transform:translate(0,50%);