css实现div于窗口居中

样式图：

首先页面覆盖整个窗口（无滚动条）

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

居中css:(将罗列三种写法，原理相同，就是可以结合不同语句实现)

第一种：

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 300px;
    margin: -150px 0 0 -300px;
    background-color: grey;
}

第二种：

.content {
    position: absolute;
    width: 600px;
    height: 300px;
    top: 0px;
    left: 0px;  
    right: 0px;  
    bottom: 0px; 
    margin: auto; 
    background-color: grey;
}

第三种：（最简洁）

.content {
    position: absolute;
    width: 600px;
    height: 300px;
    top: calc(50% - 150px);
    left: calc(50% - 300px);  
    background-color: grey;
}

注：当窗口宽度小于中间div宽度时，div宽度将被裁减不会出现滚动条。若不希望div宽度减小，可以删除body，html{}中的overflow：hidden这句话。

若有其他方法，请多多指教^ ^