盒子水平居中

 

/* 盒子居中定位  常用写法 */

1. 已知盒子大小：
1) 子盒子：定位+margin（position: absolute; left:50%; top:50%; margin-top:-盒子高度一半px;margin-left:-盒子宽度一半px）
水平居中margin: 0 auto;也可以

2) 子盒子：定位：positon: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;

2. 未知盒子大小：定位+transform （left:50%;top:50%;transform: translate(-50%,-50%)）

3. flex布局:
　　3.1 父盒子 display:flex; just-content: center; aligin-items: center; (css英文可能有误)
　　3.2 父级display：flex;子级：margin:auto。最简单方便

4. 父盒子：display: table-ceil; text-align: center; vertical-align: middle;

5. 使用js获取到盒子的宽高，按照方法1设置 定位+margin
...