table-cell 垂直居中

by Dong Shelton

HTML

<div class="wraper">
  <div class="vertical">
    <div class="content"></div>
    this is test this is test this is test this is test 
  </div> 
</div>

CSS

.wraper {
  width:200px;
  margin:0 auto;
}
.vertical {
  display: table-cell;
  width: 200px;
  height: 200px;
  border: 1px solid blue;
  vertical-align: middle;
  text-align: center;
 }
.content {
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  background-color: red;
 }