【超详细】CSS水平居中+垂直居中+水平/垂直居中的方法总结

1.如何实现水平居中

行内元素

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

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

块级元素

方法1：margin

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

2.如果盒子不定宽度，则子元素的宽度默认与父元素一样宽。这时需要设置子元素为display: inline-block; 或display: inline;即将其转换成行内块级/行内元素，给父元素设置 text-align: center;

方法2：定位

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

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

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

方法3：用flex布局

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

2.如何实现盒子垂直居中

单行的行内元素

只需要设置单行行内元素line-height: 父盒子高度px;

多行的行内元素

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

父元素变成表格单元格，设置多行文字垂直居中

块级元素

方法1：定位

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

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

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

方法2：flex布局

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

3.如何实现水平垂直居中

已知高度和宽度的元素

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

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

未知高度和宽度的元素

**方案一：**使用定位属性

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

**方案二：**使用flex布局实现

设置父元素为flex定位，justify-content: center; align-items: center;