学习文章来自CSS水平居中+垂直居中+水平/垂直居中的方法总结，本文不详细探讨具体实现，只对其中的知识点做总结。
知识点:
text-align: center运用在块级元素中，规定元素中的文本的水平对齐方式为居中对齐
潜台词:运用在块级元素中text-align会使其包含的行内元素对齐
margin: 0 auto;在有宽度的块元素中生效。auto为自动填充，左右方向的auto值均分了剩余空间，使得块元素得以在包含块内居中显示
生效条件：
块级元素：给定宽度
行内元素： 先设置
display:block使其变为块元素，再给定宽度行内块元素：设置
display:block
-
display: inline-block;/display: inline使其转换成行内块级/行内元素 -
left:50%令子元素左上角水平居中(生效前提是需要设置本身的position:absolute或relative) -
translate(-50%,-50%)作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。translate()函数是css3的新特性 -
margin-left为负值时，在元素本身有宽度的情况下，会产生位移，margin-top为负值时，不管是否设置高度，都不会增加高度，而会产生向上的位移 -
line-height: 父元素高度行高等于高度值时可居中块级元素内的文字(只对单行文本有效) -
display: table-cell让标签元素以表格单元格的形式呈现，可用于实现居中效果 -
vertical-align: middle;设置元素的垂直对齐方式为将此元素放置在父元素的中部 -
display: flex;表明使用flex布局模型 -
align-items: center;决定flex items在交叉轴(默认为y轴)上的对齐方式为居中对齐 -
justify-content: center;:决定flex item在主轴(默认为x轴)上的对齐方式为居中对齐
有了上面的知识储备后，居中实现就更容易理解了。
行内元素
水平居中
- 父元素为块元素:父元素设置
text-align: center属性 (知识点1) - 父元素不为块元素:父元素设置
display: block属性，使之变成块元素，之后操作同1 (知识点1,3)
垂直居中
- 单行行内元素:行内元素设置
line-height: 父元素高度属性 (知识点7) - 多行行内元素:父元素设置
display: table-cell和vertical-align: middle;属性 (知识点8,9)
块级元素
水平居中
- 定宽情况下:
margin: 0 auto;即可实现 (知识点2) - 不定宽情况下:需要设置
display: inline-block;转化成行内块级元素 (知识点3) ,之后操作和行内元素一样 使用定位的方法：
首先，父元素设置postition: relative;属性，需要居中的块元素设置postition: absolute;属性
- 定宽情况下:需要居中的块元素设置
left:50%;,margin-left: -块元素宽度的一半;/transform: translateX(-50%);(知识点4,6) - 不定宽情况下:需要居中的块元素设置
left:50%;transform: translateX(-50%);(知识点4,5)
使用flex的方法：
无论是否定宽:父元素上设置display: flex; justify-content: center; (知识点10,12)
垂直居中 使用定位的方法：
首先，父元素设置postition: relative;属性，需要居中的块元素设置postition: absolute;属性
- 定高情况下:需要居中的块元素设置
top:50%;,margin-top: -块元素高度的一半;/transform: translateY(-50%);(知识点4,6) - 不定高情况下:需要居中的块元素设置
top:50%;transform: translateY(-50%);(知识点4,5) 使用flex的方法： 只需要父元素上设置display: flex;align-items: center;(知识点10,11) (flex的方便显现得淋漓尽致)
水平垂直居中
就是上述对应方法的叠加
