css绝对居中

** 关键词：**绝对居中

css实现居中有很多方法，在这里我罗列出来三种：

• 第一种
• 优点：兼容性好
• 缺点：必须知道宽高，修改不方便，（可以用sass定义变量）

 .element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 宽度的一半 */
  }

• 第二种
• 优点：利用css3，不用知道宽高，响应式布局
• 缺点 : IE9以下不兼容

 .element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
  }

• 第三种
• 优点：兼用性好，响应式布局

    .element {
        width: 600px; height: 400px;
        position: absolute; left: 0; top: 0; right: 0; bottom: 0;
        margin: auto;    /* 有了这个就自动居中了 */
    }