【HTML+CSS】实现小盒子水平垂直居中大盒子

小div在大div中如何水平垂直居中
关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种，下面仅列举了常用
的几种。
首先看一下要实现的效果图及对应的html代码：

// 大盒子嵌套小盒子 小盒子水平垂直居中
<div class="big">
        <div class="small"></div>
    </div>

1.使用定位实现

* {
            margin: 0;
            padding: 0;
        }
        .big{
            position: relative;
            width: 300px;
            height:300px;
            margin: 100px auto;
            box-sizing: border-box;
            border:2px solid blue;
        }
        .small{
            position: absolute;
            width: 100px;
            height:100px;
            top:50%;
            left:50%;
            margin-top: -50px; /*这里是小盒子高的一半*/
            margin-left: -50px; /*这里是小盒子宽的一半*/
            box-sizing: border-box;
            border:2px solid red;
        }

使用定位方法,需要知道子元素的宽高,但是不需要知道父元素的宽高.

2.使用定位和margin实现

.big{
            position: relative;
            width: 300px;
            height:300px;
            margin: 100px auto;
            box-sizing: border-box;
            border:2px solid blue;
        }
        .small{
            position: absolute;
            width: 100px;
            height:100px;
            margin:auto;
            top:0;
            right: 0;
            bottom: 0;
            left:0;
            box-sizing: border-box;
            border:2px solid red;
        }

实现原理是设置margin自动适应,然后设置定位的上下左右都为0,就如四边均衡受力从而实现盒子
的居中;

3.使用display:table-cell;

.big{
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            width: 300px;
            height:300px;
            box-sizing: border-box;
            border:2px solid blue;
        }
        .small{
            display: inline-block;
            width: 100px;
            height:100px;
            box-sizing: border-box;
            border:2px solid red;
        }

实现原理:
display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签.
组合使用vertical-align,text-align,可以使父元素内的所有行内元素水平垂直居中（也就是将内
部的元素设置display:inline-block）