css居中常用的几种方法

一、水平居中

1. 行内元素水平居中

• 当子元素在父元素上设置text-align: center; 使文字/图片水平居中

  
  
  text-align: center; 文字水平居中

2. 块级元素水平居中

• 2.1定宽块级元素水平居中
  • 给需要居中的块级元素加margin: 0 auto;
  • 原理：两侧auto，平分剩余空间，相当于水平居中。
  • 一定要设置宽度width值

margin: 0 auto; 定宽块级元素水平居中

• 2.2 不定宽块级元素水平居中(宽度不固定)
  • 方法1：设置table：通过给要居中显示的元素，设置display: table,然后再设置margin: 0 auto来实现。
    
    display: table；水平居中

• 方法2：设置inline-block(多个块状元素)：子元素设置inline-block，同时父元素设置text-align: center;
  

  display: inline-block; 水平居中

• 设置flex布局：把要处理的块状元素的父元素设置display: flex; justify-content: center;
  

  display: flex; 水平居中

二、水平垂直居中

1. 单行文本水平垂直居中

• 设置上下padding相同 + text-align居中
• 利用内边距将内容区域夹在中间
• 常用于父元素无固定高度时

padding相同，text-align居中

2. 绝对定位 + 负margin

绝对定位+负margin实现垂直水平居中

3. 设置伪元素

原理：父元素设置水平居中对齐，然后再设置伪元素，然后让伪元素高度为父元素的100%高度，设置inline-block元素为垂直居中对齐，使子元素与伪元素并排，然后再中间对齐。

伪元素垂直水平对齐

4. display: table-cell

原理：父元素设置为表格的单元格元素，在表格单元格里面的元素设置verticalr-align: center垂直居中+text-align: center水平居中

display: table-cell + vertical-align + text-align: center垂直水平居中

5. position+transform

• transform里的translate偏移的百分比是相对于自身大小，根据左(x轴)和顶部(y轴)，给的参数，从当前元素位置移动，如：translate: (50px 100px)是从左边元素移动50px，并从顶部移动100px。

position+transform

6. flex布局

flex布局实现的垂直水平居中

参考：https://www.jianshu.com/p/0494d1dd7f50