CSS实现垂直水平居中

一道经典的问题，实现方法有很多种，以下是其中一种实现：
HTML结构：

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

CSS：

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

效果如下：