在專案中經常會碰到對元素進行垂直水平居中的需求，下面就來介紹一下不同場景可用的方法！

一，水平居中方法

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>