CSS常见布局（8） | 青训营笔记
这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天
前言
前言少叙，让我们直接进入主题。
垂直居中
单行行内元素
单行海内元素居中，只需要将子元素的行高等于高度就可以了。
多行元素
上面的这种方式只能处理单行的行内元素，对于多行的行内元素是处理不了的，因为给每一个子元素都设置了 `line-height`，看了很多方法，要不是没有效果，要不然就是又局限性，提到最多的是使用 `table-cell` 的方式（但是貌似这个方法也有一点弊端，那就是其子元素的表现形式和行内元素类似，子元素不能独占一行），当然如果你有更好的方式，欢迎提出。
还有一个方法是设置一个空的行内元素，使其 `height:100%`，`display:inline-block`,`vertical-align: middle;` 并且 `font-size:0`。但是这样方式的原理我还不是很清楚，只是知道要设置一个空元素，高度和父元素相等，并且设置垂直居中的属性。但是，这只是用与所有的行内元素的宽度和不超过父元素的宽度的情况。
另一个一劳永逸的方法就是 flex，但是要注意浏览器的兼容性。
图片和文字垂直居中
经常有看到设计稿是图片和文字垂直居中的，那么怎么才能让图片和文字垂直居中呢？
只需要给图片一个 vertical-align: middle; 属性就可以。
重点来啦~
自我感觉总结的居中问题不是特别的好，我们现在可以来总结一下其中的原理：
- 我们要实现水平或者垂直居中，应该从两方面下手：元素自带居中的效果或者强制让其显示在中间。
- 所以我们先考虑，哪些元素有自带的居中效果，最先想到的应该就是
text-align:center了，但是这个只对行内元素有效，所以我们要使用text-align:center就必须将子元素设置为display: inline;或者display: inline-block;； - 接下来我们可能会想既然有
text-align那么会不会对应也有自带垂直居中的呢，答案是有的vertical-align:，我一直不是很喜欢使用这个属性，因为十次用，9.9 次都没有垂直居中，一度让我怀疑人生。现在貌似也搞得不是很清楚，看了 张鑫旭的文章 居然看得也不是很懂，笑哭。目前就在table中设置有效，因为table元素 的特性，打娘胎里面带的就是好用。还有一种可以有效的方式是前面提到的空元素的方式，不过感觉多设置一个元素还不如使用table。 - 还有一只设置垂直居中的是将行内元素的
line-height和height设置为相同（只适用于单行行内元素） - 固定宽度或者固定高度的情况个人认为设置水平垂直居最简单，可以直接使用绝对定位。使用绝对定位就是子元素相对于父元素的位置，所以将父元素设置
position:reletive对应的子元素要设置position:absolute，然后使用top:50%;left:50%，将子元素的左上角和父元素的中点对齐，之后再设置偏移margin-top: 1/2 子元素高度;margin-left: 1/2 子元素宽度;。这种方式也很好理解。 - 上面的绝对定位方法只要将
margin改为transform就可以实现宽度和高度未知的居中（兼容性啊兄弟们！(ಥ_ಥ)）transformX:50%;transformY:50%；
不行，感觉总结的还是很渣，╮(╯▽╰)╭哎，谁有好的方法，求推荐。
