css实现垂直居中、水平居中、垂直水平居中

css实现垂直居中or水平居中

垂直居中
1.单行文本固定宽度：line-height ： height；这种方法适用于不进行多语言适配，文本长度不会发生变化，或最长的文本也不会进行折行。
2.多行文本不固定高度：设置相同的padding-top和padding-bottom。
3.多行文本固定高度：利用inline-block具有vertical-align属性，如下

display：inline-block；
verticle：middle；

4.absolute+负外边距：父元素相对定位，子元素绝对定位，top：50%；margin-top：负的自身高度的一半。
5.absolute+margin：auto：父元素相对定位，子元素绝对定位，top：0；bottom：0；margin：auto。
4.flex布局：align-items：center。

水平居中
1.如果是行内元素：首先看父级是不是块级元素，如果父级是块级元素，设置text-align：center，如果父级不是块级元素，把父级这职位块级元素，然后设置text-align：center。
2.如果是块级元素：如果宽度已定，设置margin：0 auto，如果不定宽度，将子元素转为行内块级元素，父级元素设置text-align：center。
3.flex布局：justify-content：center

垂直水平居中

1. 文本：text-align：center；line-height：height；
2. 相对定位+绝对定位：top：0；right：0；bottom：0；left：0；margin：auto；
3. translate （可以不知自身宽高，但兼容性不好，支持IE9+）：top：50%；left：50%；translate（-50%，-50%）；
4. flex布局：justify-content：center；