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:&nbsp;table;并给孩子这个：display:&nbsp;table-cell;vertical-align:&nbsp;middle;而已！.parent{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;table;}.child{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;table-cell; &nbsp;&nbsp;&nbsp;&nbsp;vertical-align:&nbsp;middle; &nbsp;&nbsp;&nbsp;&nbsp;padding-left:&nbsp;20px;}<div&nbsp;class="parent"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="child"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Test&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="child"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Test&nbsp;Test&nbsp;Test&nbsp;<br/>&nbsp;Test&nbsp;Test&nbsp;Test&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="child"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Test&nbsp;Test&nbsp;Test&nbsp;<br/>&nbsp;Test&nbsp;Test&nbsp;Test&nbsp;<br/>&nbsp;Test&nbsp;Test&nbsp;Test&nbsp;&nbsp;&nbsp;&nbsp;</div><div>