关于令元素垂直居中的总结

最近在回顾之前的笔记，发现对元素垂直居中的方法都有点一头雾水了，上网查看了一下资料，写着总结

对行内元素而言

要令一个元素内的文字对齐，可将元素的行高（line-height）设置与元素高度一致，主要原理是利用基线的调整
代码如下

    <div class="demo">
        <span>These</span>
        <span>elements</span>
        <span>will be</span>
        <span>centered vertically</span>
    </div>

    .demo {
        backgroundcolor:black;
        padding: 50px;
    }
    .demo span {
        backgroundcolor:gray;
        color: white;
        padding: 30px 0;
    }

当然也可以模拟表格的行为来达到效果

    <div id='out'>
        <span>hehe</span>
    </div>

    #out{
        width:200px;
        height:200px;
        background:blue;
        display:table;
    }
    span{
        display:tablecell;
        verticalalign:middle;
    }

模拟表格行为之后对内部元素设置verticalalign:middle.可以达到居中的效果

对块级元素而言

先把HTML布局写出来

    <div id='out'>
        <div id='inn'></div>
    </div>

个人比较常用的三种方法

1. 绝对定位+内部元素负位移

   #out{
       position:relative;
   }
   #inn{
       position:absolute;
       top:50%;
       transform:translateY(50%);  /*这里的transform属性的translate值，设置的50%是相对于内部元素自身宽高而言*/
   }

   这里的主要过程是先用绝对定位将内部块级元素的左上角定位到外壳元素的中部，在利用transform将其高度再“掰”回来一半（这里的一半是指内部元素高度的一半），这样就可以刚好使内部元素的中点定位在外壳元素的中点上（也就是取代了原来由于绝对定位后左上角的那个定位点）

2. 弹性布局（个人感觉这是个以后的趋势，毕竟现在都要求响应式，一个弹性布局的确能令网站更加灵活）

   #out{
       width:200px;
       height:200px;
       background:blue;
       display:flex;                         /*flex布局*/
       justify-content:  center;        /*水平居中*/
       align-items:    center;    /*垂直居中*/
   }

   这里我将水平也居中了，弹性布局需要注意的一点就是在外部父元素上设置 display:flex; 使其内部元素形成布局，所以对内部元素进行设置的话只会对更深层次的元素有效，不是对其本身有效。
   还看到有人这样用弹性布局

   #out{
       width:200px;
       height:200px;
       background:blue;
       display:flex;
   }
   #inn{
       width:100px;
       height:100px;
       background:green;
       margin:auto;
   }

   同样是在外部父元素设置布局，而再对内部元素的margin值设置，这样的话可以利用margin值对其进行想要的定位，不一定是中间（这种定位效果利用绝对定位也可以达到）

3. 绝对居中（据说是利用了CSS的溢出）

   #out{
       width:200px;
       height:200px;
       background:blue;
       position:relative;
   }
   #inn{
       width:100px;
       height:100px;
       background:green;
       position:absolute;
       margin:auto;
       top:0;bottom:0;left:0;right:0;
   }

   这一个感觉比较高玩，原理在网上看了好像是利用了CSS的溢出，但是都讲得不是很清楚，有知道的朋友可以给我留言啊！！！