css水平垂直居中方法介绍

在项目中经常会碰到对元素进行垂直水平居中的需求，下面就来介绍一下不同场景可用的方法！

一，水平居中方法

1，text-align: center

    对于inline 和 inline-block元素，可以对其父元素添加text-align: center样式

  
  
this is inline or inline-block element, it parent use text-align: center
  

2，margin: auto

    对于block元素，可以对它添加margin: auto样式

  
  
this is block element, it parent use margin: auto
  

3，position: absolute + margin

    对于inline-block 和 block 元素，如果知道它的宽度，可以对其父元素添加position: relative样式, 自身添加position: absolute和margin样式

  
  
  
    this is inline-block or block element, it use position: absolute + margin  
  
  

4，position: absolute + transform

    对于inline-block 和 block 元素，如果不知道它的宽度，可以对其父元素添加position: relative样式, 自身添加position: absolute和transform样式

  
  
  
    this is inline-block or block element, it use position: absolute + transform  
  
  

5，position: absolute + margin: auto

    对于inline-block 和 block 元素，如果知道它的宽度，可以对其父元素添加position: relative样式, 自身添加position: absolute和margin样式

  
  
  
    this is inline-block or block element, it use position: absolute + margin: auto  
  
  

6，display: flex

    flex布局适合任意类型的元素，可以对父元素添加display: flex + justify-content: center样式

  
  
this is block element, it parent use display: flex
  

二，垂直居中方法

1，line-height

    对于单行字符，可以对其父元素添加line-height样式

 
  this is one line text, it parent use line-height  

2，vertical-align: middle + 空div

    对于inline(单行字符) 和 inline-block元素，可以对其添加vertical-align: middle样式，并且紧接着在后面添加一个空div(要紧挨着前面元素)

  
  
this is inline or inline-block element, it use   
vertical-align: middle
  

3，display: table-cell + vertical-align: middle

    对于任意类型元素，可以对其父元素添加display: table-cell + vertical-align: middle样式

  
  
this is inline or inline-block   
or block element, it parent use display: table-cell + vertical-align: middle
  

4，position: absolute + margin

    对于inline-block 和 block 元素，如果知道它的高度，可以对其父元素添加position: relative样式, 自身添加position: absolute和margin样式

  
  
  
    this is inline-block or block element, it use position: absolute + margin  
  
 

5，position: absolute + transform

    对于inline-block 和 block 元素，如果不知道它的高度，可以对其父元素添加position: relative样式, 自身添加position: absolute和transform样式

  
  
  
    this is inline-block or block element, it use position: absolute + transform  
  
  

6，position: absolute + margin: auto

    对于inline-block 和 block 元素，如果知道它的高度，可以对其父元素添加position: relative样式, 自身添加position: absolute和margin样式

  
  
  
    this is inline-block or block element, it use position: absolute + margin: auto  
  
  

7，display: flex

    flex布局适合任意类型的元素，可以对父元素添加display: flex + justify-content: center样式

  
  
this is block element, it parent use display: flex
  

三，水平垂直居中方法

1，text-align + line-height

    对于inline(单行文本)元素，可以对其父元素添加text-align: center + line-height样式

  
    
this is inline element
  

2，text-align + vertical-align + 空div

    对于inline(单行文本) 和 inline-block元素，可以对其父元素添加text-align: center样式, 自身添加vertical-align: middle样式

（注：空div要紧挨着前面元素，不能换行）

  
    
this is inline or inline-block element
  

3，text-align + table-cell

    对于inline 和 inline-block元素，可以对其父元素添加text-align: center + dispaly: table-cell样式

  
  this is inline or inline-block element, it parent use text-align + table-cell  

4，margin: auto + table-cell

    对于block元素，可以对其父元素添加display: table-cell + vertical-align: middle样式, 自身添加margin: 0 auto样式

  
  
  
    this is block element, it parent use display: table-cell + vertical-align: middle
  

5，position + margin

    对于inline-block 和 block(知道自身宽度和高度)元素，可以对其父元素添加position: relative样式, 自身添加position: absolute + margin样式

  
  
this is inline-block or block element, it parent use position + margin
  

6，position + transform

    对于inline-block 和 block(不知道自身宽度和高度)元素，可以对其父元素添加position: relative样式, 自身添加position: absolute + transform样式

  
  
this is inline-block or block element, it parent use position + transform
  

7，position + margin: auto

    对于inline-block 和 block(知道自身宽度和高度)元素，可以对其父元素添加position: relative样式, 自身添加position: absolute + margin: auto样式

  
  
this is inline-block or block element, it parent use position + margin: auto
  

8，display: flex

    flex布局适合任意类型的元素，可以对父元素添加display: flex + justify-content: center + align-items: center样式

  
  
this is block element, it parent use display: flex