div垂直居中显示

有的朋友可能发现我昨天没更，毕竟昨天总决赛，就允许我稍微偷个懒吧。IG牛逼！

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

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

这个问题的具体实现的方法可以说是众多，这里我总结了几个较为常见的方法（其实是我只会这几个方法），并且稍微总结了一下一些小细节（大概就是一些实现思路和缺点之类的）。接下来我就为大家一一介绍。

1，通过margin设置为auto实现

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

---

.mid{

width: 100px;

height: 100px;

margin: auto;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

background-color: green;

}

---

2，通过负边距实现

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

---

.mid{

width: 100px;

height: 100px;

position: absolute;

left: 50%;

top: 50%;

marigin-left: -50px;

margin-top: -50px;

background-color: green;

}

---

3，通过transform中的translate实现

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

---

.mid{

width: 100px;

height: 100px;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,- 50%);

background-color: green;

}

---

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

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

---

.parent{

height: 600px;

width: 600px;

background-color: red;

display: flex;

justify-content: center;

align-items: center;

}

.mid{

width: 100px;

height: 100px;

background-color: green;

}

---

以上四条就是我总结的较为常用实现方法，其实除了这四个还有许多的实现方式，但我个人来说觉得这是最为简单实用的四个实现方法。如果大家对于别的方法感兴趣可以查看的文章众多，自己去了解就是了。