纯css+基于body的子集div的水平垂直居中

小果今天要实现这样的效果:单纯css样式，实现body下子集的水平垂直居中。

body内容：

<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>

效果：

通过一系列的尝试，实现了四种方法，惊奇的发现，其中三个是用position：absolute实现的:(div大小确定)

1.原理：position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;

<style type="text/css">
　　html,body{
    height:100%;
    width:100%;
    background: black;
    }
　　.div1{
    height: 100px;
    width: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    background: pink;
    }
　　.div2{
    height: 10px;
    width: 10px;
    margin-top: 90px;
    background: lightblue;
    }
</style>

2.原理：margin: auto;position: absolute;top: 0;right:0;bottom: 0;left: 0;

<style type="text/css">
　　html,body{
　　　　height:100%;
　　　　width:100%;
　　　　background: black;
　　　　}
　　.div1{
    height: 100px;
    width: 100px;
    margin: auto;
    position: absolute;
    top: 0;
    right:0;
    bottom: 0;
    left: 0;
    background: pink;
    }
　　.div2{
    height: 10px;
    width: 10px;
    margin-top: 90px;
    background: lightblue;
    }
</style>

3.原理：transform:translate(-100px,-100px);position: absolute;top: 50%;left: 50%;

<style type="text/css">
　　html,body{
    height:100%;
    width:100%;
    background: black;
    }
　　.div1{
    height: 100px;
    width: 100px;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    background: pink;
    -webkit-transform:translate(-100px,-100px);
    transform:translate(-100px,-100px);
    }
　　.div2{
    height: 10px;
    width: 10px;
    margin-top: 90%;
    background: lightblue;
    }
</style>

4.原理：display:flex;justify-content:center;align-items:center;

body是这样子的：

<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>

css：

<style type="text/css">
　　html,body{
    height:100%;
    width:100%;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
    }
　　.div1{
    height: 100px;
    width: 100px;
    background: pink;   
    }
　　.div2{
    height: 10px;
    width: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: 40px;
    margin-left: -50px;
    background: lightblue;
    }
</style>

以上是div1的大小确定的居中方法，那如果大小不知道呢？小果使用了paddingO(∩_∩)O

代码君：（display: table-cell必不可少啊）

body内容：

<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>

css内容：

<style type="text/css">
　　html,body{
    height:100%;
    width:100%;
    background: black;
    }
　　.div1{
    padding: 50px;
    display: table-cell;
    position: absolute;
    top: 50%;
    right:50%;
    bottom: 50%;
    left: 50%;
    background: pink;
    margin: auto;
    }
　　.div2{
    padding: 10px;
    margin-top: 30px;
    margin-left: -50px;
    background: lightblue;
    }
</style>