样式图:
首先页面覆盖整个窗口(无滚动条)
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这句话。
若有其他方法,请多多指教^ ^