div 固定宽高 水平垂直居中方法

    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>