css 垂直居中

我们知道在css中有元素的水平、垂直居中，而对元素水平居中是很简单的：

如果是行内元素，则对它的父元素采用text-algin：center；如果是一个块级元素则采用margin： auto。

但是提到元素的垂直居中，情况并不是这么良好。特别是在元素尺寸不固定的时候，更难处理。

html代码:

　　 <div> <div>center</div> </div>

css代码:

　　margin: 0 auto;
　　text-align: center;
                

对于垂直居中我们该怎么办？

使用绝对定位的解决方案：

position: absolute;
          top: 50%;
          margin-top: -20px;
     
 80px;height: 40px;    

漂亮的垂直居中

 position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -20px;
          margin-left: -40px;

  80px;height: 40px;    

上面的垂直居中方法，要求元素要有固定的宽度和高度。原理就是把设置绝对定位，让元素的左上角（top、left）放置在视口（具有定位属性的祖先元素）的正中心。

然后利用负的外边距把它向左，向上移动（移动距离相当于自身宽高的一半），最后的效果就是把自身的正中心放置在视口的正中心。

利用强大的calc()函数，上面的代码还可以简写成：

 position: absolute;
          top: calc(50% - 20px);//"-"前后有空格，为了兼容
          left: calc( 50% - 40px);   
  80px;height: 40px;

效果如上面。

这个方法的最大局限性是，它要求元素的宽高是固定的。但是通常我们的尺寸是根据内容自身来决定的，有人想到用百分比值，但是通常属性（包括margin）的百分比值都是以父元素的尺寸为基准进行解析的。

有没有一个属性它是以自身的宽高作为解析基准呢？有！

css3的变形属性中的translate（）移动函数可以做到这一点。

我们知道：translate(x,y)表示水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）。在它的函数里使用百分比值是以这个元素的自身宽高为基准进行解析的。

所以，采用百分比的css变形对元素进行偏移，就不要考虑元素固定打尺寸大小了。不过有些浏览器对css3变形还不是充分支持。

 position: absolute;
          top: 50% ;
          left: 50%;
 -webkit-transform: translate(-50%,-50%);

效果同上。

采用flexbox解决方案

最佳解决方案就是伸缩盒flexbox。

首先可以给父元素设置display：flex，再给元素自身设置margin：auto。这里的margin不仅在水平方向上将元素居中，垂直方向上也是一样。

<div id="d"> <div> center </div> </div>

css代码:

#d{display: flex;}    
#d>div{
       background: wheat;
       margin: auto;}

 采用

display: flex;
justify-content: center;
align-items: center;

也可以让内部文本居中。