css水平垂直居中的几种方式

一：水平居中

• 行内元素 text-align : center
• 块级元素 margin: 0 auto
• position:absolute; left:50%; transform: translateX(-50%)
• display:flex ; justify-ontent:center

二：垂直居中

• 一行内容设置line-height: height
• position:absolute; left:50%; transform: translateY(-50%)
• 父元素display:flex ; 子元素align-self:center
• vertical-align:middle （ inline-block元素才生效）
• 父元素display:table，子元素display：table-cell，vertical-align：middle