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>