有的朋友可能发现我昨天没更，毕竟昨天总决赛，就允许我稍微偷个懒吧。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;
}
以上四条就是我总结的较为常用实现方法，其实除了这四个还有许多的实现方式，但我个人来说觉得这是最为简单实用的四个实现方法。如果大家对于别的方法感兴趣可以查看的文章众多，自己去了解就是了。
网友评论