flex水平垂直居中

<div class="parent">
  <div class="children">我是通过flex的水平垂直居中噢!</div>
</div>
html,body{
  width: 100%;
  height: 200px;
}
.parent {
  display:flex;
  align-items: center;/*垂直居中*/
  justify-content: center;/*水平居中*/
  width:100%;
  height:100%;
  background-color:red;
}
.children {
  background-color:blue;
}

 

posted @ 2016-08-01 10:07  Seaurl  阅读(387)  评论(0编辑  收藏  举报