css 垂直水平居中

.wrapper {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid red; 
 }
.content{
    position: absolute;
    width: 200px;
    height: 200px;
    /*top、bottom、left和right 均设置为0*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*margin设置为auto*/
    margin:auto;
    border: 1px solid green;    
} 

<div class="wrapper">
     <div class="content"></div>
</div>

父级 positon:relative

子级 绝对定位position:absolute 并且四个方向为0，margin：auto