垂直居中相关知识总结
大家好，我今天准备给大家讲的是垂直居中实现方法的总结，我一说这个，可能很多学生会觉得特别简单，但是在我带班的过程中会发现很多同学对这个问题很模糊，真正实现的时候不知道怎么去做，并且在实际的工作中还是会用到很多垂直居中相关的知识，所以我觉得有必要总结一下。
我想先问一下你们能想到的实现垂直居中的方法有哪些？
1、line-height方式
2、Table布局
3、Inline-block方式
4、绝对定位之automargin
5、绝对定位之负margin
6、transform
7、额外div
8、Flex居中
我把他们分为了两类，文本的垂直居中和块级垂直居中
文本垂直居中：line-height方式、table布局
块级垂直居中：绝对定位之automargin、绝对定位之负margin、额外div、inline-block方式、transform方式、flex居中
一、line-height方式
说明：
该方式只适用于情况比较简单的单行文本，只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。这种方法在小元素上非常有用，例如使按钮文本或者单行文本居中。
优缺点分析
优点：适用于所有浏览器 无足够空间时不会被截断；
缺点：只对文本有效(块级元素无效)， 多行时，断词比较糟糕；
二、table布局
说明：
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
display:table此元素会作为块级表格来显示 类似table标签
display:table-cell 此元素会作为一个表格单元格显示 类似td 和 th标签
原理：
利用表布局特点，vertical-align设置为Middle后，单元格中内容中间与所在行中间对齐。
优缺点分析
优点：支持任意内容的可变高度、支持响应式，相对于line-height而言，可以兼容文字有多行的情况；
缺点：每一个需要垂直居中的元素都会需要加上额外标签（需要table、table-cell两个额外元素）
三、Inline-block
说明：将center元素display设置为inline-block，vertical-align设置为middle，为包含框设置after伪元素，将伪元素display设置为inline-block,vercial-align设置为middle，同时设置height为100%，撑开容器。
原理：为同一行的inline-block元素设置vertical-align：middle，该行内的inline-block元素会按照元素的垂直中心线对齐。
优缺点分析
优点：支持响应式、支持可变高度；
缺点：会加上额外标记；
四、绝对定位之automargin
说明：使用绝对定位要求元素必须设置明确高度。内容超过元素高度时需要设置overflow决定滚动条的出现
resize 属性规定是否可由用户调整元素的尺寸。
注释：如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。
resize: none|both|horizontal|vertical;
优缺点分析
优点：支持响应式，并且在resize后仍然居中；
缺点：没有显式设置overflow时，内容超过元素高度时会溢出，没有滚动条；
五、绝对定位之负margin
说明：已知元素高度后，使用绝对定位将top设置为50%，mergin-top设置为内容高度的一半(height + padding) / 2；内容超过元素高度时需要设置overflow决定滚动条的出现；top：50%元素上边界位于包含框中点，设置负外边界使得元素垂直中心与包含框中心重合；
优缺点分析
优点：代码量少、适用于所有浏览器、不需要嵌套标签；
缺点：不支持响应式(不能使用百分比、min/max-width)；
六、Transform
这是最简单的方法，不近能实现绝对居中同样的效果，也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%)必须带上浏览器厂商的前缀，还要加上
top: 50%; left: 50%;
优点：
1. 内容可变高度
2. 代码量少
缺点：
1. IE8不支持
2. 属性需要写浏览器厂商前缀
3. 可能干扰其他transform效果
4. 某些情形下会出现文本或元素边界渲染模糊的现象
七、额外div
说明：在需要居中的元素外插入一个div，设置外div的height为50%，margin-bottom为内部元素的一半（height+padding）/2。内容超过元素高度时需要设置overflow决定滚动条的出现。
优缺点分析
优点：浏览器兼容性好，支持旧版本ie；
缺点：需要额外元素、不支持响应式；
八、Flex居中