CSS3:如何保持浮层水平垂直居中

（一）利用绝对定位与transform 
　

       <div class="parent">

　　　　　　<div class="children">div>

　　　　div>

• 1
• 2
• 3
• 4
• 5

　将父元素定位(relative)，子元素如下

　.children{
　　　　position: absolute;
　　　　top: 50%;
　　　　left: 50%;
　　　　-webkit-transform:translate(-50%,-50%);
　　　　background: black;
　　}

• 1
• 2
• 3
• 4
• 5
• 6
• 7

（二）利用flexbox

　.parent{

　　　　justify-content:center;
　　　　align-items:center;
　　　　display: -webkit-flex;

　　}

• 1
• 2
• 3
• 4
• 5
• 6
• 7