div垂直对齐中间css

Question

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

这很简单：给父母这个：

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>