关于让div元素垂直居中的几种方法

如何用让嵌套在里面的div居中

本人是一个前端新手，如何让两个相互嵌套的div，让里面的div居中是一个比较简单的问题，面试也常问，我就从其他博客中提取稍微总结一下（转载侵删），也加了一点自己的困惑和理解，错误的地方希望能有人指出：

• 利用position：absolute的特性
• 设置margin为auto
• display:table-cell
• transform
• flex

方法一：利用position：absolute的特性

先设置元素的top、left偏离50%，再用margin让位置往回一半。

.parent{
    width: 400px;
    height: 400px;
    position: relative;
    background: red;
}
.child{
    width: 200px;
    height: 200px;
    position: absolute;
    background: green;
    top: 50%;
    bottom: 50%;
    margin-left: -100px;
    margin-top: -100px;
}

需要注意的是要将父级的postision设为relative，否则元素将不会相对于父级进行定位
该方法在pc中的兼容性很好，另外，稍微改一下，也就是：

.parent{
    width: 400px;
    height: 400px;
    position: relative;
    background: red;
}
.child{
    width: 200px;
    height: 200px;
    position: absolute;
    background: green;
    top: 50%;
    margin-top: -100px;
}

就可以让div只在垂直方向居中，还是比较常用的

方法二：设置margin为auto

.parent{
    width: 400px;
    height: 400px;
    position: relative;
    background: red;
}
.child{
    width: 200px;
    height: 200px;
    position: absolute;
    background: green;
    margin: auto;
    top: 0;
    right:0;
    bottom: 0;
    top: 0;
}

兼容性：主流浏览器都支持，IE6不支持

方法三：display：table-cell

.parent{
    width: 400px;
    height: 400px;
    background: red;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.child{
    width: 200px;
    height: 200px;
    background: green;
    display: inline-block;
    vertical-align: middle;
}

table-cell属性是让标签元素以表格单元格的形式呈现，类似于td标签
vertical-align是行内元素的一个属性，设置行内元素是以基线对齐还是中间对齐
text-align设置后让元素在水平方位居中
兼容性：由于table-cell是css3的属性，兼容性上低版本的IE不支持该属性

方法四：transform

.parent{
    width: 400px;
    height: 400px;
    background: red;
    position: relative;
}
.child{
    width: 200px;
    height: 200px;
    background: green;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

这边我有点不太理解的是，我发现并不需要设置position：absolute直接用translate(50%, 50%)也能垂直居中，但网上多数方法都用了position：absolute，希望有大神能够替我解答下我的疑问
兼容性：IE9以下不支持transform，手机端上的支持比较好

方法五: flex

.parent{
    width: 400px;
    height: 400px;
    background: red;
    display: flex;
    align-items: center;
    justify-content: center;
}
.child{
    width: 200px;
    height: 200px;
    background: green;
}

flex在移动端的支持非常好，在pc端的兼容性还是差了点，所以这种方式是移动端的首选

转载自：https://www.cnblogs.com/libin-1/p/5869430.html