div固定宽高，水平垂直居中，根据所用单位不同，分成两种情况，分别是“px”和“%”情况。
例：将三层div做出三个边框，要求水平垂直居中。效果如图
- 情况一（单位是px时）：
只需要用绝对定位到屏幕中间，然后利用margin-left和margin-top取值就可以实现。
<style type="text/css">
.a {
border: 1px solid #00caca;
width: 900px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -450px;
margin-top: -250px;
display: flex; //flex让内部div水平垂直居中
flex-direction: row;
justify-content: center;
align-items: center;
}
.b {
border: 1px solid #00cacc;
width: 80%;
height: 70%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.c {
border: 1px solid #00fffb;
width: 60%;
height: 60%;
}
<body>
<div class="a">
<div class="b">
<div class="c">ssssss</div>
</div>
</div>
</body>
- 情况二（单位是%）：
由于%是基于父元素宽高，采用margin-left值为负本身宽高一半失效，因此，需要计算定位top 和 left值，使其居中。代码如下，其中，HTML结构不变。
<style type="text/css">
body {
width: 100%; //需要给body设置宽高
height: 100%;
}
.a {
border: 1px solid #00caca;
width: 80%;
height: 80%;
position: absolute;
top: 10%; //根据自身宽高占body的80%，推算定位top值
left: 10%; //同上
margin-left: 0;
margin-top: 0; display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.b {
border: 1px solid #00cacc;
width: 80%;
height: 70%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.c {
border: 1px solid #00fffb;
width: 60%;
height: 60%;
}
</style>