css盒子垂直水平居中方法总结

经常使用到嵌套盒子居中的问题，使用使用弹性局部解决，使用使用比例，很多都用得初始熟。

1. 设置盒子外边框，使外盒子居中，左右外边框值相等（长度未知）
   水平居中:在div的position为relative（相对定位时有效，绝对定位无效）

//盒子相对父盒子水平居中
margin: 0px auto ; 
//

2、不知道盒子长宽：垂直水平居中：top、right、bottom、left全为0 margin: auto;
给父盒子相对定位
给子盒子绝对定位

top:0px;
right:0px;
bottom:0px;
left:0px;
margin:auto;

3、知道盒子长宽
父元素相对定位
子元素绝对定位
left: 50%;top: 50%;
margin-left: 负的子盒子宽度一半。
margin-top: 负的子盒子高度一半；

4、不知道盒子长宽
父元素相对定位
子元素绝对定位

<div class="parent">
    <div class="between">
        <div class="child"></div>
    </div>
</div>

.parent {
    position: relative;
}
.between {
    position: absolute;
    left: 50%;
}
.child {
    position: relative;
    right: 50%;
}

5、使用css3的弹性布局：

             display: flex;
            justify-content: center;//实现水平居中
            align-items: center;//实现垂直居中

6、使用css3 translate属性
主要思路：将子盒子的div的top和left的偏移值设为50%
通过对子盒子的大小，反移动子盒子的一半长宽长度：

<div class="parent">
    <div class="child"></div>
</div>

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}