CSS实现垂直水平居中

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

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

CSS：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

.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;    }

效果如下：