html+css：《水平、垂直居中》问题的解决方法总结

水平居中问题

---

1.内联元素水平居中

在父元素上设置:text-align:center;

---

2.块级元素水平居中

子元素上设置:margin:0 auto;

---

3.利用:（父元素）

display：flex;

justify-cotent:center;

（块级元素、行内块状元素、内联元素）

---

4.已知自身宽度，自身设置：

position：absolute；

left：50%；

margin-left：-（自身宽度的一半（块级元素））

---

5.如果不知道自身的宽度，则：

position：absolute；

left：50%；

transform：translateX(-50%);

---

垂直居中问题

---

1.单行内联元素垂直居中

仅限于单行文本，超出无效

父元素上设置：

line-height：父元素的height大小；

---

2.多行内联元素垂直居中

• 先将多行文本用标签包起来
• 父元素上设置：line-height:父元素height；
• 在标签里面设置：display：inline-block；
• 因为line-height具有继承性，所以在标签里面还要设置：line-height：normal；
• 最后，在标签上设置：vertical-align：middle；

---

3.多行内联元素、内联块状元素垂直居中

父元素上设置：display：table-cell；

在子元素上设置：vertical-align：middle；

---

4.父元素上设置：

display：flex；

align-items：center；

（内联元素、内联块状元素、块级元素）

---

5.已知自身高度，自身设置：

position：absolute；

top：50%；

margin-top：-（自身高度的一半（块级元素））；

---

6.如果不知道自身高度，则：

position：absolute；

top：50%；

transform：translateY（-50%）;

---