margin:auto与绝对定位元素的水平垂直居中实例页面

展示

代码

• HTML：

  <div class="father">
      <div class="son"></div>
  </div>

• CSS：

  .father {
      width: 300px; height: 150px;
      background-color: #f0f3f9;
      position:relative;
  }
  .son { 
      position: absolute; 
      top: 0; right: 0; bottom: 0; left: 0;
      width: 200px; height: 100px;
      background-color: #cd0000;
      margin: auto;
  }