[CSS] 水平置中與垂直置中(傳統作法)

想說把之前報過的幾個簡報整理為文章記錄一下好了XD


在 CSS 中,大家時常為了水平置中與垂直置中的問題而困擾,這篇文章整理幾個傳統解決置中的做法。

不過現在 CSS3 有 flexbox 排版與 grid 排版,幫助我們解決排版的問題,只不過還不夠普及就是了。(flexbox 在IE上還有許多bug….)

首先必須知道在 HTML 的每個元素都有預設的一個 display 屬性,詳情請查文件

如:

  • inline: <span>、<a>、<b>、<i>…等。
    inline 元素預設依據內容多寡決定寬度並可以多個並排在一行,無法設定 width、height、margin-top、margin-bottom、padding-top 及 padding-bottom。
  • block: <div>、<nav>、<section>、<p>、<h1>…等。
    block 元素預設會佔滿父元素的100%並且換行,
  • inline-block: 可以多個並排在一行,且可以設定 block 的所有 CSS 屬性。(引述以下 Vexed Blog:就是外面是 inline ,裡面是 block 。)
  • flex: CSS3 的一種排版方式,請見此文章。
  • 其他: 剩下的其他屬性相比較不常見,有用到再自己看囉!

接下來,我就以 inline 與 block 的水平置中及垂直置中方法來介紹(inline-block 的方法就與 inline 一樣)~


水平置中

    • inline: 利用 CSS 的 text-align 屬性,在父元素宣告以下這行即可。
      text-align:center;
    • block: 利用 CSS 的 margin 屬性,會根據自身寬度自動(auto)調整左右寬度。
      margin: 0px auto;


垂直置中的每個方法都有一定的限制條件,要看使用時的條件與情況才能決定該套用哪種寫法

垂直置中(方法一)

最單純的固定此元素的與父元素之間的 padding-top、padding-bottom

PS. 這個方法僅將元素中的內容置中,實際上元素區塊是佔滿父元素的。 (這樣元素內容高度可動態增加)

 

垂直置中(方法二)

(垂直置中部分僅討論具有 block 屬性之元素。inline 元素並不具有可調整的高度,因此應被具有 block 屬性的元素包住)

利用 line-height 設定行高與元素相同高度,即可垂直置中。

PS. 這個方法僅能應用在內容為單行時的情況,若超過一行則會導致 overflow。

 

垂直置中(方法三)

利用模擬 table 的 display, display: table-cell; 具有 vertical-align: middle; 屬性。

PS. 這樣的方法,其實就是早期使用 table 的方式去做網頁的排版,只是我們換成使用 div。

 

垂直置中(方法四)

利用 position: absolute; top:50%;  margin-top: -[本身一半高度] (父元素必須要有固定高度並 position: relative;),原因如此

PS. 我個人覺得這方法限制很多….父元素與當前元素都需要固定高度,其實有時候蠻不實際的。

垂直置中(方法五)

利用類似水平置中的作法,設置 positon: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; margin: auto;

PS. 子元素必須要有高度,不然會佔滿父元素

垂直置中(方法六)

將擬元素與目前元素 display 改為 inline-block,利用擬元素與目前元素做 vertical-align: middle; 的對齊,設定擬元素的 width:0; 與父元素 font-size:0;

PS. 寫這篇文章時看到的FB大神寫法,彈性較大,也減少不少的程式碼阿XD (不過感覺也有點複雜Q)


我所知的水平與垂直置中的方法大概有以上這幾種,每種有它所適用的情況。

使用前,先根據你的條件,判斷你需要的是哪一種囉!(不要單純複製貼上阿~~)

 

參考資料:

http://www.w3schools.com/cssref/pr_class_display.asp

http://blog.xuite.net/vexed/tech/29221717-CSS+%E5%B1%AC%E6%80%A7+display+%E7%9A%84%E5%80%BC+inline+block+inline-block+none

http://blog.yam.com/hanasan/article/35806444

https://www.facebook.com/josephj6802/posts/10200920251622230

Leave a Reply