div不定宽高实现垂直居中布局

在开发中经常会遇到让某个元素垂直居中，但宽度并不确定。下面就总结一下，哪些方法可以实现不定宽高，水平垂直居中。

不适合的方案

text-align和line-height

这两个都是适用于单排文字，在不确定高度，且文字有多行的情况下，并不适合。

position：absolute、50%和margin：-px;

大部分情况下，这种方案是可以满足要求的。但是在内部元素高度不确定的情况下，你无法知道margin的偏移量该是多少。所以也不适合。

position：fixed、0和margin：auto；

当我们要制作一个弹出框时，可以选择这个方案。

 
fixed center

position:absolute、0和margin：auto

 
  
this is a p
  

    

     this is a box fixed in center of screen
    
  

这种方案的缺点是子元素依然要设定宽高。

正确的方案

display:table和display:table-cell

  

    center center
   
  

position:absolute、50%和translate

  

    center center
   
  

在这里面通过transform来替代margin做位移，translate(-50%, -50%)将会将元素位移自己宽度和高度的-50%。

vw vh和translate

vh和vw是两个比较偏的单位，是指“viewport的hieght和width的1%”

  

    center center
   

vh vw只能从窗口的大小去考虑，不适合正常的文档流，不过在一些特殊场合确非常有用。比如说做全屏应用。

：beforr和display:inline-block

  

    center center
   
  

flex

  

    center center
   
  

display: flex，表示该容器内部的元素将按照flex进行布局。align-items: center表示这些元素将相对于本容器水平居中，justify-content: center也是同样的道理垂直居中。对.container赋予了这些样式之后，作为它的内部元素.inner自己自觉的居中了。而且这里你会发现，由于没有使用text-align: center，.inner里面的文字是不会居中的，也就是说仅仅.inner这个容器居中而已。
以上