CSS 垂直居中

時間 2019-11-08

標籤 css 垂直居中欄目 CSS 简体版

原文原文鏈接

歡迎你們先來看看個人水平居中篇：http://www.cnblogs.com/cuncunjun/p/6549955.html

首先要清楚一個問題，何時你會要設置垂直居中？你們不要被各類例子弄暈頭，靜下心來想想！
• 一個父元素，若是不設置高度的話，默認就是緊包着子元素，若是你的padding-top和padding-bottom是相等，那麼這自己就是一個垂直居中的效果！！！！！css

• 固然，若是你的子元素並不獨佔一行，而是行內元素和inline-block元素的話就不同了。好比下面這個例子：html

<div id="container">
      <span>aaaaaaaaaaaa我我我</span>
      <img src="1.jpg" width="100px"/><img src="1.jpg" width="120px"/>
</div>

這涉及到一個知識點，就是line-box原理。詳情可見張鑫旭老師的博客： http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/css3

inline和inline-block都是在一行顯示，如圖所示因爲圖片自己有高度，就會把整個行高撐大，可是文字和圖片依然在一行。
相信細心地朋友會發現，圖片下面有一條小空白。這就涉及到了vertical-align屬性，張鑫旭老師的博客寫的很詳細。在這裏我給你們簡單總結一下。
vertical-align只對inline-block元素有效，換句話，inline-block 自帶vertical-align屬性。屬性的值有不少，主要有下圖這幾種：chrome

Vertical-align默認值是baseline！即便你沒有設置這個屬性，也會有。因此圖片是和整個line-box的baseline對齊，因此下面會有空白。瀏覽器

言歸正傳：這種狀況下，誰想居中誰就本身設Vertical-align：middle；固然只對line-block有效！好比我對兩個圖片設置垂直居中，安全

#container{
     border:2px solid blue;
 }
img{
    vertical-align:middle ;
 }

效果如圖所示，不少人可能會問，怎麼文字也居中了呢？
答：其實不是文字居中，而是圖片相對整個行居中，也就是文字所在的行居中，圖片下移，這個時候上方被圖片撐起來的line-height變矮了，因此整個行都上移，直到最高的圖片碰到父元素的border。只不過視覺效果上是文字也居中了。wordpress

• 再而後，就是父元素設置了height，子元素如何垂直居中？
記住一點vertical-heigh只是針對inline-block有效，而且僅僅是相對元素所在line-box垂直居中！！也就是說只能在一行中折騰！佈局

#container{
     border:2px solid blue;
     height:250px;
 }
img{
    display:inline-block;
    vertical-align:middle ;
}

我給父元素設置了高度，會發現圖片仍然只在本身的那行居中，並不在整個父元素居中。
就算是塊狀元素設置display：inline-block，也是隻在本身那一行居中！
因此這種狀況，vertical-align就排不上用場了，固然仍是有居中的辦法，具體見下文嘍！！學習

1.line-height（適用單行文本)

height: 該元素的高度，line-height: 指在文本中，行與行之間的基線間的距離。
設置line-height，比font-size大就好了。height不設就行，默認是line-height的高，非得設值的話，就height=line-height便可。flex

<div class="container">
    hi,imooc!
</div>
<style>
  .container{
      /*height:100px;*/
      line-height:100px;
    }
</style>

弊端：當文字內容的長度大於塊的寬時，就有內容脫離了塊。

2.適用於父元素有本身的的height，本身是塊狀元素的狀況（最經常使用）

a. 負外邊距:設置元素爲absolute/relative/fixed，（1）偏移量（top或者bottom）設置爲50%，（2）margin設置爲元素寬度一半乘以-1。
若是塊元素尺寸已知，能夠經過如下方式讓內容塊居中於容器顯示：
經過absolute設置top: 50%; left: 50%;外邊距margin取負數，大小爲width/height（不使用box-sizing: border-box時包括padding）的一半。

<div id="a">
      <div id="b">kkkkkkk</div>
</div>
#a{
    border: solid blue;
    width:800px;
    height:300px;
    position: relative;
    margin:50px;
    padding:40px;
}
#b {  
    width: 300px;  
    height: 200px;  
    padding: 20px;  
    position: absolute;  
    top: 50%;
    margin-top: -120px; /* height/2 + padding */  
}

注意此時absolute是在父元素的padding+content中居中，50%是父元素padding+content的50%；
relative是在父元素的content中居中，50%是父元素的content的50%；
fixed是視圖居中，50%是可視窗口的50%，因此適用若是想要在瀏覽器居中。

b. position:absolute/fixed + top,bottom:0 + margin:auto

<div id="a">
    <div id="b">看我是否能夠居中。</div>
</div>
#a{
    border: solid blue;
    width:800px;
    height:350px;
    margin:50px;
    padding:40px;
     position: relative;
}
#b {
    width: 300px;
    height: 100px;
    padding: 20px;
    border: 1px solid red;
    position:absolute;
    top:0;
    bottom: 0;
    margin:auto 0;
}

和水平居中是一個原理，若是被居中的元素沒有設置height的話，content就會被扯大，充滿父元素。
position：relative就失效了，由於他和父元素沒有關係而是相對原來的位置偏移，上下設置top bottom：0是沒有變化的。
fixed能夠實現居中，只不過不是相對父元素而是可視窗口。

3.父元素height隨意，本身是行內、塊狀都適用

a. table標籤
使用插入 table(包括tbody、tr、td)標籤

<body>
    <table><tbody><tr><td class="wrap">
         <div>
            <div>看我是否能夠居中。</div>
            <div>看我是否能夠居中。</div>
            <div>看我是否能夠居中。</div>
        </div>
    </td></tr></tbody></table>
</body>
css代碼：
table td{height:300px;background:#ccc;padding:0;}

由於 td 標籤默認狀況下就默認設置了 vertical-align 爲 middle，因此咱們不須要顯式地設置了。雖然我顯示設值了padding爲0，可是根據圖片來看，td的content是緊包着子元素的，剩下的用padding來填充，因此視覺上是垂直居中的效果。不管裏面包含的是文本仍是圖片。

b. display:table-cell + vertical-align:middle
在 chrome、firefox 及 IE8 以上的瀏覽器下能夠設置塊級元素的display 爲 table-cell（設置爲表格單元顯示），激活 vertical-align 屬性，但注意 IE六、7 並不支持這個樣式, 兼容性比較差。注意和新增table標籤不同的是必定要設置vertical-align。（給父親設不是給本身）

<div class="container">
    <div>
        <p>看我是否能夠居中。</p>
    <img src=""/>
    </div>
</div>
<style>
  .container{
      height:300px;
      background:#ccc;
      display:table-cell;/*IE8以上及Chrome、Firefox*/
      vertical-align:middle;/*IE8以上及Chrome、Firefox*/
  }
</style>

感謝評論區的朋友，提供了一種新的思路。可是有一點錯誤，我後面會指正出來，無論怎麼仍是謝謝你！
前面提到的都是css的傳統佈局方法，垂直居中實現起來確實什麼麻煩。2009年，W3C提出了一種新的方案—- Flex佈局，能夠簡便、完整、響應式地實現各類頁面佈局。目前，它已經獲得了全部瀏覽器的支持，這意味着，如今就能很安全地使用這項功能。
關於flex佈局的基礎知識我就不一一列舉了，菜鳥教程這一節講的什麼清晰，你們能夠自行學習。 http://www.runoob.com/w3cnote/flex-grammar.html

4.CSS3的flex彈性盒子佈局法

讓我帶着你們來逐步嘗試，首先給父元素設置display：flex，並設置按照主軸的排列方式即水平方向從左到右依次排列row,若是你想要垂直居中的子元素只有一行能夠設置nowrap。若是你想要好幾行元素做爲總體一塊兒居中的話就能夠設置wrap。flex佈局真的很神奇很方便！

#container{
    width:600px;
    border:2px solid blue;
    display:flex;
    flex-flow: row  nowrap;
 }

<div id="container">
    <span id="child">aaaaaaaaaaaa我我我</span>
    <img src="1.jpg" width="100px"/>
    <img src="1.jpg" width="120px" />
    <img src="1.jpg" width="80px" />
    <img src="1.jpg" width="110px"/>
</div>

注意：此時我仍然按照CSS裏面的習慣，只對img的width設置了，沒有對height設置。然而在flex佈局中行不通，圖片的高度不在根據寬度等比例自使用設置了，而是會填滿整個父元素。

那咱們給圖片分別設置好高度以後，接下來，就要真正的設置垂直居中了！
注意justify-content:center;是水平居中。而垂直居中是align-items:center;
附上完整代碼：

#container{
            width:600px;
            border:2px solid blue;
            height:250px;
            display:flex;
            flex-flow: row  nowrap;
            align-items:center;
        }
<div id="container">
    <span id="child">aaaaaaaaaaaa我我我</span>
    <img src="1.jpg" width="100px" height="100px"/>
    <img src="1.jpg" width="120px" height="120px"/>
    <img src="1.jpg" width="80px" height="80px"/>
    <img src="1.jpg" width="110px" height="110px"/>
</div>

完美！！！
有同窗可能會產生疑問，若是子元素是塊狀元素怎麼辦？ flex佈局很強大，不管子元素是塊狀仍是行內通通都排排坐在一行，誰也不能獨佔一行。進了flex的門，一輩子都是flex的魂！！！ flex還有不少其餘好玩的屬性，你們能夠本身去練練手，十分有趣！！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。