css知识笔记：垂直居中（别只看，请实操！！！）

css实现元素的垂直居中。

（尝试采用5W2H方法说明）：

别只看，请实操！！！

What：

1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式，并说明优缺点。
2.写这篇文章的目的，是为了巩固自己的知识，也分享给大家一起学习研究，欢迎大家指正和评论。

Why：

需要水平居中的原因，就是为了让元素位于视觉中心突出重点，可视化布局的简介明了，主题明确，提高用户体验度。

When：

我是星期六下午开始编写，一直到晚上12点。
对于你自己，如果你感觉自己对这些掌握还不牢靠，请立刻！马上！Now！开始动手尝试起来，不然一开始就浇灭你的小火苗，让你丧失了激情和男人该有的冲动。

Where：

学习的场所可以是anywhere；咖啡厅、家里、饭店、火车上（我就是在高铁上码的文章），不必拘泥场所，只要不冷能动手就做起来。

Who：

针对人员比如像我这种遗忘型、刚入门的初学者、以及在css懵懂过程中徘徊的你，大神请绕路或留个脚印踩踩也行。
我，一个大老爷们，没啥好说的；你们，一群智商200+，给个支点就能撬动地球的你们，动动手指你们就全学会了。

How Long：

你要问我学懂这个大概多长时间，以大家高达200+赶超爱因斯坦的智商，说半天就能搞懂我都感觉是瞧不起大家，以各位看官的智商，半个小时，顶多半个小时，你就能掌握。

How：

请忽略以上的部分废话，以下的怎么做才是重点：

行内元素居中方式：

   <div style="height:50px;border:1px solid red;">
        <label style="line-height:50px">单行文本label垂直居中：设置line-height为父级行高</label>
   </div>

块级元素居中方式：

1.伪元素after （兼容各个浏览器）

<div class="parent">
      <div class="son">垂直居中:伪元素after方式</div>
</div>

.parent {
  border: 2px solid blue;
  /* text-align: center; */ /*设置可水平居中*/
  height: 100px;
}

.parent::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;

}

.son {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid blue;
}

2.flex布局：display:flex;align-items:center;

      <div style="display:flex;align-items:center;height:50px;border:1px solid blue;">
        <div style="heigth:30px;border:1px solid red;">Flex垂直居中</div>
      </div>

3.position:absolute;top:50%;transform:translateY(-50%);

<div style="border:1px solid red;height:50px;position:relative;">
        <div
          style="border:1px solid red;
        position:absolute;top:50%;transform:translateY(-50%); "
        >绝对定位垂直居中：position:absolute;top:50%;transform:translateY(-50%);</div>
      </div>

4.position:absolute;top:50%;margin-top:-0.5*元素height

<div style="border:1px solid red;height:50px;position:relative;">
        <div
          style="position:absolute;top:50%;height:20px;margin-top:-10px;color:red;"
        >绝对定位垂直居中：position:absolute;top:50%;margin-top:-0.5*元素height</div>
</div>

5.position:absolute;top:0;bottom:0;margin:auto 0;

<div style="border:1px solid red;height:50px;position:relative;">
        <div
          style="border:1px solid red;position:absolute;top:0;bottom:0;
        margin:auto 0;height:30px;"
        >绝对定位垂直居中:position:absolute;top:0;bottom:0;margin:auto 0;</div>
</div>

6.父：display:table; 子：dispaly:table-cell;vertical-align:middle;

<div style="display:table;border:1px solid pink;height:50px;">
        <div
          style="display:table-cell;vertical-align:middle;height:20px;background:gray;"
        >父：display:table; 子：dispaly:table-cell;vertical-align:middle;</div>TODO:table-cell的高度不起作用，有待研究
</div>

### 参考文献 [1] (https://louiszhai.github.io/2016/03/12/css-center/)

结后语：

兄dei,实操吧！
不然做起来只看感觉都看懂了，一关闭我的文章就：嗯？水平居中都哪几种方式来着？再次打开看了之后回想：嗯？水平居中这几种方式都会有什么问题或优缺点？
看的时候都会以为看懂了：这不是很简单吗？
做的时候都突然感觉自己是个麻瓜：我去！这么简单怎么布局就不对呢？哪影响了？调好之后，咦~，怎么突然就好了呢？
所以，

别只看，请实操！！！