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

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

使用弹性布局

即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;    }

完结