div垂直居中显示

今天，我想回忆并且总结下关于div垂直居中的内容。

这个内容在CSS这一块可以说是非常重要的一块了，首先在我们平时具体的页面布局中，令一个div垂直居中可以说是最基本的样式了，然后在求职的过程中，这可以说是个必考题，不论笔试还是面试基本必考，毕竟这个问题都不会的话，这个前端也水的太过分了。

1，通过margin设置为auto实现

这个方法可以说是最为直接的实现方式了，具体代码如下（具体格式我就不写了，把对应的样式部分给大家写一下）：

width: 100px;

height: 100px;

margin: auto;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

}

2，通过负边距实现

这个方法的具体实现思路其实很简单，我们先绝对定位，把div左上角的点放到父类的中间，然后通过负边距，将div以自己的高宽为基准向左、上两个方向移动百分之五十。

.mid{

width: 100px;

height: 100px;

position: absolute;

left: 50%;

top: 50%;

marigin-left: -50px;

margin-top: -50px;

}

3，通过transform中的translate实现

这个方法的思路类似于上一个方法，只是在具体实现上不靠margin而是通过transform中的translate来移动div，如果你理解了上一个方法的内容，这个理解起来应该不难。

.mid{

width: 100px;

height: 100px;

position: absolute;

left: 50%;

top: 50%;

transform: translate(50%, 50%);

}

4，通过弹性布局（就是flex）实现

通过flex实现其实没什么特别可说的，毕竟他本身就是CSS自带的布局方法，其内就自带了居中的方式。这里我就不多说直接贴代码了，具体的原理学习flex布局后大家应该都懂。

.parent{

height: 600px;

display: flex;

justify-content: center;

align-item: center;

}

.mid{

width: 100px;

height: 100px;

}