CSS里面元素的水平居中、垂直居中、水平垂直居中方案

水平居中

行内元素

首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center; 如果不是，则先将其父元素设置为块级元素，再给父元素设置 text-align: center

块级元素

定宽

1. 需要谁居中，给其设置 margin: 0 auto; （作用：使盒子自己居中）
2. 首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%)

不定宽

1. 默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素，给父元素设置 text-align: center;
2. 首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中。利用css3新增属性transform: translateX(-50%)

宽度定不定都可以

只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center

垂直居中

行内元素

单行行内元素

利用line-height实现居中

多行行内元素

给父元素设置display:table-cell;和vertical-align: middle;属即可

块级元素

定高

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%)

不定高

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，利用css3新增属性transform: translateY(-50%)

高度定不定都可以

只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center

水平垂直居中

宽高已知

1. 设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto
2. 设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: -元素宽度的一半px; margin-top: -元素高度的一半px
3. top:calc(50% - w/2)、left:calc(50% - w/2)

宽高未知

1. 设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%)
2. 设置父元素为flex定位，justify-content: center; align-items: center