这几天一直在鼓捣Ubuntu，进度有点落下了....哈哈。我终于可以在ubuntu里上b站了（就是不支持独显---哎，好像我的目的不是这个吧....）。
image.png
言归正传，先我来讲讲关于垂直居中以及相关的思考。
大家作为一个标准前端有没有考虑一个问题，我们是如何让布局形成的？
1.定位（相对于哪里我说的可不是单单指父容器啊？想想绝对定位）
2.绘制，这个是我自己起的名词，这个绘制有两种方式（应该不会有其他方法了），一个是撑开，另外一个是定长和定宽（height,width）。
到这里你有没有似乎想起来什么呢？
对，为什么我们总是喜欢关于垂直居中的问题？
因为这个很有趣，它可以引出很多概念以及问题。
好现在我们以border为分界线来描述盒模型来描述这个问题
撑开：顾名思义，我们应该让父容器依据自己来进行布局。
- margin:好吧，这个思路很好想，但是你们千万别忘了给父元素加border或padding（想想边距合并，至于两边是否会合并（当然是inline-block和float(需要清除浮动或者父元素形成bfc)了，你们觉得block会在同一行吗（大雾）），自己做实验。）示例
- vertical-align:这里要注意baseline示例代码，你肯定会有疑问，为什么我对before伪元素设置居中其他的元素却居中了,因为baseline。你们可以做下实验，分别设置line-hight、将父容器中的任意一个子元素设置为inline-block然后设置height，再去调整其他元素的对其方式（vertcial-align），你们会得到一个结论,baseline的基准由line-height、子元素（该元素已经设置vertical-align）高度中最高值中的较大者来决定。虽然我没找到规范是是如何定义的,具体请看这里。
- padding：这应该算是最简单的方式了吧，理解了上面两个这个就很容易了。
定长、定宽：子元素应该根据父元素来进行布局
ps：有些方式和撑开中的方式类似就不在赘述。
- margin和transform混合使用，示例,不过建议不要这么用，因为block元素默认与其他元素不在同一行，这样做十分浪费空间。
- 父容器设置为定位元素（一般为position：relative),子元素设置为position：absolute，这样子元素就会相对于父元素进行定位，如果父元素设置成relative的话，由于“根”还未脱离文档流，那么它对其它元素则没有任何影响。十分推荐用这种方式。示例
- 浮动，实在是不建议用这个啊，因为你需要形成bfc，或者清除浮动啊,而且在水平上下方向float的初始位置是当前行（你在父容器上设置padding-top试试）啊（别问我水平左右方向，我打你啊。），具体可以参照撑开部分，自己写一个。
