关于文本水平垂直居中的一般方法

Posted 2020-09-26

下面是一些比较常用的居中方法。

 

水平居中

1.行内元素：自身 text-align:center。

2.行内块元素：父亲  text-align:center。

3.块级元素：自身 margin:0 auto。

 

垂直居中

1.单行文本：line-height 和父亲的 height 一致。

2.多行文本：父亲元素 display：table ，将文本放在一个子div中，设置子div样式 display：table-cell 和 vertical-align：middle 。

3.块级元素：

• 自身绝对定位， left，right，top，bottom 全都为 0 ，margin： auto。
• 自身绝对定位，top：50%，transform;translateY(-50%)。
• 父亲元素 display:flex  , justify-content: center (水平居中) , align-items: center (垂直居中) 。