块级元素和行内元素多种——水平，垂直、水平垂直居中的方法

1、水平居中：

A、直接设置div属性：margin：0 auto；



B、父元素属性text-align：center；（对块级元素没有用）：



C、div设置属性

position：relative；（这是相对于父元素）

margin：auto；

left：0；

right：0；



D、给父div设置属性：justify-content：center；

display：-webkit-flex；

2垂直居中：

a、父级元素设置：height：n px；

line-height：n px；

二者的值相同；



b、设置父级元素属性：

display：table-cell；

vertical-align：center；

水平垂直居中：

水平居中的与垂直居中混合使用：

水平居中：A、B、C、D

垂直居中：a、b

其他居中：使用计算的方法：

从left，right，margin，padding等跟位置调整有关的元素都可以设置；

前提是需要对position进行设置；

这个就看着搭配；（重点需要记住，有些居中是对块级元素无效的；）

再补一个垂直水平居中的：父级元素属性设置：

justify-content：center；

align-items：center；

display：-webkit-flex；