三招教你div垂直居中

在前端的面试和日常的工作当中，经常会碰到让一个div（或者一块区域）上下左右垂直居中的问题，左右居中是非常简单的，如：

margin: 0 auto; 但是，要做到垂直居中的话，很多同学就犯愁了，下面就给大家分享3中垂直居中的方案。


 
提前先准备好一个div，这里做了个类似弹窗的样子出来，html代码如下：
    <style>
        .box {
            width: 300px;
            height: 220px;
            box-sizing: border-box;
            border: 1px solid #666;
            border-radius: 5px;
        }
        .box .title{
            border-bottom: 1px solid #666;
            padding: 10px;
        }
        .box .cont{
            padding: 10px;
        }
    </style>
    <div class="box">
        <div class="title">标题</div>
        <div class="cont">我是内容...</div>
    </div>

1）传统定位方式（常用）

  .box {
    width: 300px;
    height: 220px;
    box-sizing: border-box;
    border: 1px solid #666;
    border-radius: 5px;
    /*  采用定位的方式   */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -110px;
}
这个方案就是采用定位实现，是最传统也最常用的方式。首先把box设置为absolute，然后定位left:50%; top:50%; 这个时候元素的左上角点就会处于页面的正中间。然后，我们的目的是需要让box的中心在页面的正中间，那么就可以使用margin属性对元素进行平移。设置margin-left: -150px; margin-top: -110px; 也就是margin-left值是宽度的一半，margin-top值是高度的一半，此时我们的box就正好处于页面中心位置了。

2）使用css3的translate

第一种方案是一种通用方案，没什么兼容性问题。但是麻烦发的是需要计算margin-left和margin-top的值，当box的宽高发生变化的时候，margin-left和margin-top也要随之发生改变，灵活性不够。所以，我们可以改进一下：
.box {
    ...
    /*  采用定位的方式   */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -110px;
}
改为:
.box {
    ...
    /*  采用平移的方式   */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
也就是把margin-left和margin-top换成transform: translate(-50%,-50%); 这样的话我们就不需要手动计算box的宽高了,这里的(-50%, -50%) 就是box宽高的一半。但是，使用时注意兼容性，毕竟translate属于css3的属性，不是所有的浏览器都支持。

3）使用flex弹性布局

html,body{
    height: 100%;
    width: 100%;
    /*  采用弹性布局的方式   */
    display: -webkit-flex; /* Safari */
    display: flex;
    align-items: center;
    justify-content: center;
}

flex弹性布局打破了原有通过margin、padding、position等css属性进行布局的限制，使用弹性布局需要使用display属性进行指定display: flex; 为了兼容性可以加上display: -webkit-flex;来让浏览器更好的支持。此时我们的body已经是一个弹性盒子了，里面子元素的布局规则就可以使用弹性布局的规则了。这里box没有除了body以外的父元素，所以只好加在body上，任何元素都可以使用弹性布局。

下面加上align-items: center;让子元素垂直居中，justify-content: center;让子元素水平居中。此时，我们的box就可以上下左右垂直居中了，但是要注意一点，当我们使用居中center时，父元素body需要指定宽度和高度，否则body的高度就是被子元素撑起来的，宽度默认为100%浏览器的宽度，就达不到垂直居中的目的，所以就就要指定 height: 100%; width: 100%;

这样的话，页面效果就正常了。

以上三种方案都可以实现box的完美垂直居中，喜欢的同学可以收藏啦！！！--上海尚学堂web前端