css水平垂直居中方法介绍

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

一，水平居中方法

1，text-align: center

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

<div style="text-align: center;">  
  <div style="display: inline;">this is inline or inline-block element, it parent use text-align: center</div>  
</div>

2，margin: auto

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

<div style="margin: 0 auto;">  
  <div style="width: 200px;">this is block element, it parent use margin: auto</div>  
</div>

3，position: absolute + margin

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

<div style="position: relative;">  
  <div style="width: 200px; position: absolute; left: 50%; margin-left: -100px;">  
    this is inline-block or block element, it use position: absolute + margin  
  </div>  
</div>

4，position: absolute + transform

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

<div style="position: relative;">  
  <div style="display: inline-block; position: absolute; left: 50%; transform: translateX(-50%);">  
    this is inline-block or block element, it use position: absolute + transform  
  </div>  
</div>

5，position: absolute + margin: auto

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

<div style="position: relative;">  
  <div style="display: inline-block; position: absolute; left: 0; right: 0; margin: auto; width: 200px;">  
    this is inline-block or block element, it use position: absolute + margin: auto  
  </div>  
</div>

6，display: flex

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

<div style="display: flex; justify-content: center;">  
  <div>this is block element, it parent use display: flex</div>  
</div>

二，垂直居中方法

1，line-height

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

<div style="height: 200px; line-height: 200px;"> 
  this is one line text, it parent use line-height  
</div>

2，vertical-align: middle + 空div

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

<div style="text-align: center;">  
  <div style="display: inline; vertical-align: middle;">this is inline or inline-block element, it use   
vertical-align: middle</div><div style="display: inline-block; height: 100%; vertical-align: middle;"></div>  
</div>

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

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

<div style="display: table-cell; vertical-align: middle;">  
  <div style="display: inline;">this is inline or inline-block   
or block element, it parent use display: table-cell + vertical-align: middle</div>  
</div>

4，position: absolute + margin

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

<div style="position: relative;">  
  <div style="height: 200px; position: absolute; top: 50%; margin-top: -100px;">  
    this is inline-block or block element, it use position: absolute + margin  
  </div> 
</div>

5，position: absolute + transform

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

<div style="position: relative;">  
  <div style="display: inline-block; position: absolute; top: 50%; transform: translateY(-50%);">  
    this is inline-block or block element, it use position: absolute + transform  
  </div>  
</div>

6，position: absolute + margin: auto

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

<div style="position: relative;">  
  <div style="display: inline-block; position: absolute; top: 0; bottom: 0; margin: auto; height: 200px;">  
    this is inline-block or block element, it use position: absolute + margin: auto  
  </div>  
</div>

7，display: flex

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

<div style="display: flex; justify-content: center;">  
  <div>this is block element, it parent use display: flex</div>  
</div>

三，水平垂直居中方法

1，text-align + line-height

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

<div style="text-align: center; line-height: 200px; height: 200px;">  
    <div style="display: inline;">this is inline element</div>  
</div>

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

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

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

<div style="text-align: center;">  
    <div style="display: inline;vertical-align: middle;">this is inline or inline-block element</div><div   
    style="vertical-align: middle; display: inline-block; height: 100%;"></div>  
</div>

3，text-align + table-cell

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

<div style="display: table-cell; text-align: center; vertical-align: middle;">  
  this is inline or inline-block element, it parent use text-align + table-cell  
</div>

4，margin: auto + table-cell

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

<div style="display: table-cell; vertical-align: middle;">  
  <div style="margin: 0 auto; width: 200px;">  
    this is block element, it parent use display: table-cell + vertical-align: middle</div>  
</div>

5，position + margin

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

<div style="position: relative;">  
  <div style="width: 200px; height: 100px; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -100px;"  
  >this is inline-block or block element, it parent use position + margin</div>  
</div>

6，position + transform

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

<div style="position: relative;">  
  <div style="display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);"  
  >this is inline-block or block element, it parent use position + transform</div>  
</div>

7，position + margin: auto

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

<div style="position: relative;">  
  <div style="display: inline-block; width: 200px; height: 100px; position: absolute; top: 0; left: 0;   
  right: 0; bottom: 0; margin: auto;">this is inline-block or block element, it parent use position + margin: auto</div>  
</div>

8，display: flex

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

<div style="display: flex; justify-content: center; align-items: center;">  
  <div>this is block element, it parent use display: flex</div>  
</div>