1、常见块级元素
2、常见行内元素
3、居中方式对比和总结
（1）行内元素
- 水平居中：
text-align:center；绝对定位 + transform - 垂直居中：
flex 布局；绝对定位 + transform；table-cell + vertical-align;vertical-align（多个行内元素） - 水平垂直居中：
flex 布局；flex 布局 + margin；绝对定位 + transform；text-align + line-height；table-cell + text-align + vertical-align
（2）块级元素
- 水平居中：
margin；flex 布局；flex 布局 + margin；绝对定位 + transform；绝对定位 + margin - 垂直居中：
flex 布局；flex 布局 + margin；绝对定位 + transform；绝对定位 + margin - 水平垂直居中：
flex 布局；flex 布局 + margin；绝对定位 + transform；绝对定位 + margin
4、关于 table-cell、vertical-align、line-height 和 margin
问题1：为什么为什么
table-cell + text-align + vertical-align + inline-block可以实现行内元素和块级元素的水平居中、垂直居中和水平垂直发居中对齐？
display:table-cell会将父元素变成表格里面的td 元素diaplay:inline-block会将子元素变成行内块元素
问题2：如何理解
vertical-align属性？
- vertical-algin 是用来设置行内元素垂直对齐的方式
- 该属性定义行内元素的基线相对于该元素(设置了 vertical-algin 的元素)所在行的基线的垂直对齐方式。在表格中，这个属性会设置单元格框中的单元格内容的对齐方式。
- 只有元素是 inline-block 和 inline 的时候，设置 vertical-algin 才会起作用
- 我们需要更理解 vertical-align 才能使用好这个属性，以下两个博客可以帮助我们更好的理解。第一篇文章：vertical-align到底怎么用；第二篇文章：关于Vertical-Align你需要知道的事情。
问题3：
line-height的应用场景？
- 元素必须只有一行
- 父元素中若只设置了
line-height而没有设置height时，默认height = line-height。 - 主要应用于标题中，需要设置垂直居中时。
问题4：为什么
flex 布局 + margin可以实现行内元素和块级元素的水平居中、垂直居中和水平垂直发居中对齐？
margin:auto的本质是通过获取盒子剩余空间的值，并自动计算margin-top、margin-bottom、margin-left、margin-right的值来实现居中。- BFC 下
margin:auto在垂直方向上无法居中的原因：margin-top = margin-bottom = 0。这里也从另一方面说明了一点：margin:auto在行内元素中无用，因为行内元素无法设置宽度，宽度都是由内部更不要说给让 margin 自动计算剩余的空间值。还有一个，如果元素脱离文档流，也无法使用 margin，原因一样。
- FFC/GFC 下
margin:auto在垂直方向上无法居中的原因：在通过 justify-content 和 align-self 进行对齐之前，任何正处于空闲的空间都会分配到该维度中的自动 margin 中去。另外，FFC(flex formatting context)批的是 Flex 格式化上下文；GFC(grid formatting context）指的是 Grid 格式化上下文。
