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

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

不适合的方案

text-align和line-height

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

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

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

position：fixed、0和margin：auto；

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

<style>
.container{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  amrgin:auto;
}
</style>

<div class="container" style="width: 300px; height:200px; background:red"> 
fixed center
</div>

position:absolute、0和margin：auto

<style>
.container{
  position:relative;
}
.inner-wrapper{
  postion:absolute
}
</style>

<div class="container"> 
  <p>this is a p</p>
  <div class="inner-wrapper">
    <div class="inner" style="width: 300px;height: 200px;background: #f1f1f1">
     this is a box fixed in center of screen
    </div>
  </div>
</div>

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

正确的方案

display:table和display:table-cell

<div class="container">
  <div class="inner">
    center center
   </div>
  </div>
<style>
  .container{
  display:table
}
.inner{
display:table-cell;
vertical-align:middle;
text-align:center;
}
</style>

position:absolute、50%和translate

<div class="container">
  <div class="inner">
    center center
   </div>
  </div>
<style>
  .container{
  display:relative
}
.inner{
display:absolute;
top:50%;
left:50%;
transfrom:translate(-50%,-50%)
}
</style>

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

vw vh和translate

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

  <div class="inner">
    center center
   </div>
<style>
.inner{
 display:fixed
top:50vh;
left:50vw;
transfrom:translate(-50%,-50%)
}
</style>

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

：beforr和display:inline-block

<div class="container">
  <div class="inner">
    center center
   </div>
  </div>
<style>
  .container：before{
 content: '';
diaplay:inline-block;
height:100%;
vertacal-align:middle;
}
.inner{
display:inline-block;
}
</style>

flex

<div class="container">
  <div class="inner">
    center center
   </div>
  </div>
<style>
 .container{
    diaplay:flex;
    align-item:center;
    justify-content:center;
  }
  .inner{
    display:inline-block;
  }
</style>

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