css元素居中

1. 元素水平居中：

a) 行级元素，行内块级元素水平居中：

对父元素text-align：center；（父级元素的宽度不会产生影响）

b) 块级元素：

对子元素margin：0 auto;(不受子元素父元素宽度影响)

2. 垂直居中：

a) 行级元素，行内块级元素垂直居中：

对父元素：line-height：父元素的高度；（父元素高度是个准确的值，且只能是单行元素）

b) 图片：

vertical-align：middle；（高度不受影响，不设置就是图片高度）

c) 块级元素：

i. 内外边距法，也可以结合使用（父元素子元素都要有固定的值

1. 对父元素：padding：合法属性值；（计算父级与子级宽度高度差的一半）
2. 对子元素：margin：合法属性值；（计算父级与子级宽度高度差的一半）
   【注意上边距可能会出现外边距击穿的问题，overflow：hidden进行解决】

ii. 定位+外边距居中法：（父元素无具体尺寸，子元素有具体尺寸）【此方法中水平不能使用其他方法，类似0 auto】

1. 对子元素：利用绝对定位（相对父元素绝对定位）+margin；
2. 水平：left：50%；margin-left：-子元素宽度尺寸的一半；
3. 垂直：top：50%，margin-top：-子元素高度尺寸的一半；

iii. 定位加外边距自适应居中法：（父元素无具体尺寸，子元素无具体尺寸）

1. 对子元素：利用绝对定位（相对父元素绝对定位）+margin:auto+top:0;+right:0+left:0+bottom:0；
   【一般情况有左无右，有上无下，但是auto是全方位居中，则能生效】

3. 定位加位移居中法（适用于所有元素，父元素无具体尺寸，子元素无具体尺寸）：

a) 对子元素：

利用绝对定位（相对父元素定位）+ left：50%+ top：50%+transform：translate (-50%，-50%)；
【该属性位移转换，translateX(-50%)水平x轴向左位移自己宽度的一半，translateY(-50%)垂直Y轴向上高度的一半；translate (x轴位移量，y轴位移量)】

4. 弹性盒子居中法：

对父元素：display：flex；/display：-webkit-flex；+justify-content：center；+align-items：center；
【多行文本最好使用此类方法 】