關於令元素垂直居中的總結

本文轉載於:猿2048網站關於令元素垂直居中的總結

最近在回顧以前的筆記，發現對元素垂直居中的方法都有點一頭霧水了，上網查看了一下資料，寫着總結

對行內元素而言

要令一個元素內的文字對齊，可將元素的行高（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將其高度再「掰」回來一半（這裏的一半是指內部元素高度的一半），這樣就能夠恰好使內部元素的中點定位在外殼元素的中點上（也就是取代了原來因爲絕對定位後左上角的那個定位點）

1. 彈性佈局（我的感受這是個之後的趨勢，畢竟如今都要求響應式，一個彈性佈局的確能令網站更加靈活）

#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值對其進行想要的定位，不必定是中間（這種定位效果利用絕對定位也能夠達到）

1. 絕對居中（聽說是利用了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的溢出，可是都講得不是很清楚，有知道的朋友能夠給我留言啊！！！