关于css的水平垂直居中

求各位大神帮忙解决一下！！！为什么下面的代码就是不能居中？

 *{ margin:0; padding:0; }
    .wrapper {
      position: relative;
      width: 500px;
      height: 500px;
      background-color: #ddd;
     }
    .content{
        background-color:#6699FF;
        width:200px;
        height:200px;
        position: absolute;        
        top: 50%;
        left: 50%;
        margin-top:-100px ;  
        margin-left: -100px;
    } 
</style>
<body>
    <div class="wrapper">
        <div class="content"></div>
    </div>    
</body>

没问题啊，不过你的style没有开始标签

 <style>*{ margin:0; padding:0; }
    .wrapper {
      position: relative;
      width: 500px;
      height: 500px;
      background-color: #ddd;
     }
    .content{
        background-color:#6699FF;
        width:200px;
        height:200px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top:-100px ;
        margin-left: -100px;
    }
</style>
<body>
    <div class="wrapper">
        <div class="content"></div>
    </div>
</body>

整个代码是这样的，就是不能居中。
<!DOCTYPE html>

ssssssss

<style>
*{ margin:0; padding:0; }
.wrapper {
  position: relative;
  width: 500px;
  height: 500px;
  background-color: #ddd;
 }
.content{
    background-color:#6699FF;
    width:200px;
    height:200px;
    position: absolute;        //父元素需要相对定位
    top: 50%;
    left: 50%;
    margin-top:-100px ;   //二分之一的height，width
    margin-left: -100px;
}

知道了，谢谢了。加了注释就出现不居中。 //这种注释。尴尬、