三种方法实现垂直水平居中详解

在前端布局中或者笔试面试中，经常会问到如何实现垂直水平居中。以下就是常用的三种解决方法。

使用弹性布局

即display:flex

首先看看html布局

<div class="wrap">

    <div class="content"></div>

</div>

.content通常是指需要垂直水平居中的元素

.wrap就是它的父元素

设置父元素display:flex成为一个弹性盒子

justify-content:center设置其子元素水平居中

align-items:center设置其子元素垂直居中

！！！这里是align-items不是align-content，

关于弹性盒子的问题下一期详细讲解

CSS样式

.wrap{
     display:flex;
     justify-content:center;
     align-items:center;
     height: 200px;
     background:#18587A;
}
.content{
    width: 1000px;
    height: 100px;
    background:#FC624D;
}

优点:支持响应式布局，不需要具体计算

缺点:对IE兼容性不是太好（辣鸡IE）

下面介绍第二种方法

使用绝对定位

即position:absolute

设置其父元素为相对定位display:relative

设置子元素，也就是需要垂直居中的元素display:absolute

设置子元素left:50%,top:50%,这样子元素的左上角就移动到父元素的中心了

设置子元素margin-left: - 子元素宽度的一半，margin-top: - 子元素高度的一半

注意margin取负数，这样子元素就实现垂直水平居中了

CSS

.wrap{
        position: relative;
        height: 200px;
        background-color: yellow;
    }
.content{
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100px;
        height: 100px;
        margin-left: -50px;
        margin-top: -50px;
        background-color: green;
    }

优点:兼容性比较好，支持更多浏览器

缺点:需要计算子元素的宽度和高度（不使用LESS和SASS情况下）

最后介绍一种方法

使用table-cell

设置父元素display:table-cell

设置父元素vertical-align: middle实现内容垂直居中

设置父元素text-align: center实现内容水平居中

下面看看具体的代码

.wrap{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 500px;
    width: 200px;
    background: red;
    }
.content{
    display: inline-block;
    width:100px;
    height: 200px;
    background-color: green;
    }

完结