第一种方式:定位的方式
让当前的盒子相对于其父级的容器来定位
- 首先要把父级元素的定位方式改为 relative
- 然后把当前盒子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以及之前的是不兼容的。可根据项目中的实际需要去选择采用的方式。