在前端面试和日常工作中，经常会遇到让一个div（或一个区域）上下左右垂直居中的问题。左右居中很简单，比如：margin:0auto;但是，如果要实现垂直居中，很多同学会犯愁，下面就给大家分享三种垂直居中的解决方案。提前准备好一个div，这里看起来像一个弹窗。html代码如下：标题就是内容...1）传统定位方式（常用）.box{width:300px;高度：220px；box-sizing:border-box;边框：1px实心#666；边界半径：5px；/*定位方式*/position:absolute;顶部：50%；左：50%；左边距：-150px；margin-top:-110px;}这个方案是通过定位实现的，这是最传统也是最常用的方法。先把box设置成absolute，然后positionleft:50%；顶部：50%；这时候元素的左上角就会在页面中间。然后，我们的目的是让盒子的中心在页面的中间，然后我们就可以使用margin属性来平移元素了。设置margin-left:-150px;边距顶部：-110px；也就是说，margin-left值是宽度的一半，margin-top值是高度的一半。这时，我们的框就在页面的中央。2）第一种使用css3的translate的方案是通用方案，不存在兼容性问题。但是麻烦的是需要计算margin-left和margin-top的值。当盒子的宽高发生变化时，margin-left和margin-top也会随之变化，不够灵活。所以，我们可以改进一下：.box{.../*定位方式*/position:absolute;顶部：50%；左：50%；左边距：-150px；margin-top:-110px;}改为:.box{.../*使用平移方式*/position:absolute;顶部：50%；左：50%；transform:translate(-50%,-50%);}即把margin-Changeleft和margin-top变成transform:translate(-50%,-50%);这样我们就不需要手动计算盒子的宽高了，其中（-50%，-50%）就是盒子一半的宽高。不过使用的时候要注意兼容性。毕竟translate是CSS3的属性，并不是所有的浏览器都支持。3）使用flex弹性布局html,body{height:100%;宽度：100%；/*使用弹性布局*/display:-webkit-flex;/*Safari*/显示：flex；align-items:center;justify-content:center;}flex弹性布局通过margin,padding,position等css属性打破了布局原有的限制。使用弹性布局需要使用display属性指定display:flex；为了兼容性，您可以添加显示：-webkit-flex；允许更好的浏览器支持。此时我们的body已经是一个灵活的盒子了，里面的子元素的布局规则可以使用灵活布局的规则。这里box除了body没有其他父元素，所以必须加在body上，任何元素都可以使用elastic布局。添加对齐项目：居中；将子元素垂直居中，并justify-content:center;使子元素水平居中。至此，我们的盒子就可以上下左右垂直居中了，但是需要注意的是，当我们使用居中中心时，父元素body需要指定宽高，否则body的高度是子元素支持的，宽度默认为100%，浏览器的宽度不会达到垂直居中的目的，所以需要指定height:100%；宽度：100%；在这种情况下，页面效果将是正常的。相关资料可参考上海尚学堂Web前端开发。以上三种方案都可以实现盒子的完美垂直居中。喜欢的话可以收藏哦！
