CSS居中的方法，水平、垂直

水平居中

1.行内元素

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

2.如果父级元素不是块级元素，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;

2.块级元素

1.定宽度：需要谁居中，给其设置 margin: 0 auto;（作用：使盒子自己居中）

2.不定宽度：默认子元素的宽度和父元素一样，这时需要设置子元素为行内元素，即inline或者inline-block，然后给父元素设置 text-align: center;

3.使用定位属性

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；

1.定宽度：设置绝对定位的子元素的 *margin-left: -元素宽度的一半px;* 或者设置transform: translateX(-50%);

2.不定宽度：利用css3新增属性transform: translateX(-50%);

4.使用flexbox布局实现（宽度定不定都可以）

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

垂直居中

1.单行的行内元素

只需要设置单行行内元素的"行高等于盒子的高"即可；height,line-height

2.多行的行内元素

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

3.块级元素

方案一：使用定位

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中；

定高度：设置绝对子元素的 *margin-top: -元素高度的一半px;* 或者设置transform: translateY(-50%);

不定高度：利用css3新增属性transform: translateY(-50%);

方案二：使用flexbox布局实现（高度定不定都可以）

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

水平垂直居中

1.已知宽度和高度的元素

方案一：设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

方案二：设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: -**-元素宽度的一半px**; margin-top: -**-元素高度的一半px**;

2.未知宽度和高度的元素

方案一：使用定位属性设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

方案二：使用flex布局实现设置父元素为flex定位，justify-content: center; align-items: center;