css中子元素在父元素垂直居中的方法

①定位+外边距 盒子宽高已知，

position: absolute;

left: 50%; top: 50%;

margin-left:-自身一半宽度;

margin-top: -自身一半高度;

②定位+transform  盒子高宽已知，

 #container{

position:relative;  

border:1px solid red;   

width:800px;  

height:600px; }

#center{

 width:100px;

 height:100px;

background:blue;

position:absolute;

top:50%;

left:50%;

transform: translate(-50%,-50%); }

③flex 布局

    父级：

       display: flex;

        align-items: center;

        justify-content: center;

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

注释：flex布局最容易上手，根据flex规则很容易达到某个布局效果，理解很快 推荐！