【前端】盒子水平垂直居中的五大方案

第一种方式：定位的方式

让当前的盒子相对于其父级的容器来定位

1. 首先要把父级元素的定位方式改为 relative
2. 然后把当前盒子position设置为absolute，先把左上角固定在中间，然后向上和向下移动该盒子的一半

position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -50px;

方法的缺点：一定要知道当前盒子的宽和高，以此来计算调整位置后需要移动的距离

第二种方式：拉住他

**这种方式没什么好说的，算是利用程序的小缺陷吧，直接看代码

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

方法的缺点：虽然不需要知道盒子的具体宽和高，但是这个盒子必须得有一个固定的宽和高，不然就会被拉伸的很难看

第三种方式：css3新功能

position: absolute;
top: 50%;
left: 50%;
tranform: translate(-50%, -50%);

具体请参考：CSS3 transform属性

—以上三种方式核心都是基于定位来的—

第四种方式：flex弹性伸缩模型

display: flex; /* 设置为flex布局 */
justify-content: center; /* 设置为水平居中 */
align-items: center; /* 设置为垂直居中 */

详情参考：flex布局

第五种方式：JavaScript解决方案

获得当前屏幕的宽和高，获取盒子的宽和高，然后定位的时候用屏幕宽高减去盒子宽高再除以2.本质上还是基于定位来的，需设置body的position为relative，box的position为absolute。

    <script>
        let HTML = document.documentElement,
            winW = HTML.clientWidth,
            winH = HTML.clientHeight,
            boxW = box.offsetWidth,
            boxH = box.offsetHeight;
        box.style.position = "absolute";
        box.style.left = (winW - boxW) / 2 + 'px';
        box.style.top = (winH - boxH) / 2 + 'px';
    </script>

---

总结：其实盒子水平居中还有其他的解决方案，当前最常用的是第三种和第四种方式，但是他们需要考虑兼容，对于一些老版本的浏览器例如IE8以及之前的是不兼容的。可根据项目中的实际需要去选择采用的方式。