CSS元素居中布局（全面分析）

刚开始接触css样式百度最多的就是balabala如何居中，因为不懂原理，每次凑出来就忘记了，前段时间看到一个很全面的分析刚好记下来了，现在基本光靠这份笔记就可以解决几乎所有的元素的居中问题，再也不用去百度了！

首先我们要回顾一下块级元素（block），行内元素(inline)以及行内块级元素(inline-block)
我之前查了一下发现大家对行内元素会有些笼统，这次分析就把它们分开来，一下是常见的元素及其分类：

Display	元素
block	div、p、h1…h6、ol、ul、dl、table、address、form等
inline-block	img、input、button等
inline	span、a、br、b、strong、sup、sub、i、em、del、u、textarea、select等

接下来就是文章的重点了！

水平居中

居中分类	条件1	方案	条件2	如何实现
水平居中	儿子为inline或inline-block	方案一	爸爸为block	将爸爸设置text-align:center
			爸爸不为block	设置爸爸为block，再设置text-align:center（设成inline-block不行）
	儿子为block	方案一	儿子的宽度固定	给儿子设置margin:0 auto
			儿子的宽度不固定	需要把儿子装换为inline或inline-block 再给爸爸text-align:center （默认子元素宽度和父元素一样）
		方案二	儿子的宽度固定	爸爸设为相对定位，儿子设为绝对定位 然后让儿子水平居中left:50% 设儿子 margin-left:-元素一半宽度px 或 transform:translateX(-50%)
			儿子的宽度不固定	爸爸设为相对定位，儿子设为绝对定位 然后让儿子水平居中left:50% 设儿子 transform:translateX(-50%)
		方案三	-	给爸爸添加display:flex; justify-content:center;(宽度定不定都可以)

垂直居中

居中分类	条件一	方案	条件2	如何实现
垂直居中	儿子为inline	方案一	单行的行内元素	行高等于盒子的高度 （例爸爸div的height和儿子span的line-height一样）
			多行的行内元素	给爸爸添加display:flex;align-items:center;
	儿子为block	方案一	-	爸爸设为相对定位，儿子设为绝对定位 然后让儿子垂直居中top:50% 设儿子 margin-top:-元素一半高度px 或 transform:translateY(-50%)
		方案二	-	给爸爸添加display:flex;align-items:center;

水平垂直居中

居中分类	条件一	方案	如何实现
水平垂直居中	已知儿子及爸爸的宽高	方案一 利用定位属性 auto	爸爸相对定位，儿子绝对定位 然后给儿子：top 0 right 0 bottom 0 left 0 margin auto （如果儿子宽高缺失会继承爸爸的，然后没缺失的那个属性会居中）
		方案二 利用定位属性 手动	爸爸相对定位，儿子绝对定位 left :50% top:50% margin-left:-一半宽度px; margin-top:-一半高度px;
	儿子宽高未知，但知道爸爸的	方案一 利用定位属性 translate	爸爸相对定位，儿子绝对定位 left :50% top:50% translateX(-50%) translateY(-50%)
		方案二 flex布局	爸爸flex定位 justify-content: center; align-items: center;

以上基本就包含了我遇到的过的所有的情况了，还是很实用的！