2015年4月15日 星期三

[筆記] CSS垂直置中的方法


在學習網頁排版的過程中,置中(不論垂直或水平)一直是個相當麻煩的事,關於CSS中置中的方式,網路上可以找到非常多,這裡的整理算是我自己的一個筆記吧,如果內容有問題在麻煩告知。
以下是之後示範中HTML Body的部分

<div class="outer">
    <div class="inner">
        <p>要置中的內容</p>
    </div>
</div>

後面則是搭配上不同的CSS作為展示

文字的垂直置中方法
line-height

很好用的方法,就是設定div的高度和文字高度一樣,就可以簡單達到垂直置中的效果。
CSS:
        *{padding: 0; margin: 0}
        .outer{
            background-color:#95AFBA;
        }
        .inner{
            background-color: #D5E1A3;    
            height:300px;
            line-height:300px;
        }

效果:

1


邏輯:當DIV區塊的高度等同於文字行高的,文字就會被放在中間。

TABLE

CSS:
       .outer{
            background-color:#95AFBA;
            display: table;
            height:300px;
        }
        .inner{
            background-color: #D5E1A3;    
            display: table-cell;
            vertical-align: middle;           
        }

效果:

2


邏輯:把要垂直置中的內容當作是table來操作,所以可以用vertical align的指令。

inline-block + vertical-align

透過這個方法,我們可以將多行文字也做一個垂直置中,這個方法也可以用來幫區塊作垂直置中。

CSS:
       .inner{
            background-color:#95AFBA;
            height:400px;
            font-size:0;
        }
        .inner:before {
            content: "";
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }
        p{
            display:inline-block;
            vertical-align: middle;
            font-size:12px;
        }
效果:
padding
將在下面說明
區塊(div)的垂直置中方法

Position + Margin

這個方法是利用絕對定位absolute的方式,搭配上margin來操作。

CSS:
        .outer{
            background-color:#95AFBA;
            position:relative;
            height:400px;
        }
        .inner{
            background-color: #D5E1A3;    
            position:absolute;
            top:50%;
            height:100px;
            margin-top: -50px; //這個高度必須要是height的一半
            
        }
效果:


邏輯:

這個想法的概念是這樣,首先我先用absolute來做絕對定位,當我輸入top = 50%時,這個div的左上角,會被移到高度為50%的地方:


但這樣並沒有真的把div區塊置中,因為它超過了,所以我們需要搭配上margin-top的指令,透過負值的方法把它往上調,而往上調的高度就是inner這個區塊高度的一半,這時候,這個inner div就會被垂直置中了。

這個作法,只要稍微改一下,就可以讓它變成水平置中的方法了,邏輯一樣,先用absolute定位,定位的位置是左邊的50%處,這時候div的左上角會在剛好50%的地方,但整個div卻會超過,所以利用margin-left的負值再把它修正回來:
       .outer{
            background-color:#95AFBA;
            position:relative;
            height:400px;
        }
        .inner{
            background-color: #D5E1A3;    
            position:absolute;
            top:50%;
            left:50%;
            height:100px;
            margin: -50px 0 0 -50px; //margin-top必須要是height的一半,margin-left必須要是寬度的一半
            
        }

結果如下圖:


Position + Margin  2

這個方法會設定top和bottom的位置,讓它不可能符合,再透過margin的方式,讓它變成垂直置中。

CSS:
        .outer{
            background-color:#95AFBA;
            position:relative;
            height:400px;
        }
        .inner{
            background-color: #D5E1A3;  
            height:100px;
            width:100px;
            position:absolute;
            top:0;
            bottom:0;
            margin: auto;
        }
效果:


邏輯:
這個方法同時設定top和bottom為0,使得inner這個div完全不可能符合,最後再透過margin這個指令,讓它達到垂直置中的效果,類似的方法,也可以讓它達到水平置中,只要在inner的地方,多加上left:0; right:0,就可以達到水平置中

語法簡單修改一下就可以:
        .outer{
            background-color:#95AFBA;
            position:relative;
            height:400px;
        }
        .inner{
            background-color: #D5E1A3;  
            height:100px;
            width:100px;
            position:absolute;
            top:0;
            bottom:0;
            left:0;
            right:0;
            margin: auto;
        }

Position +Transform 

這個方法其實和上面提的Position + Margin的第一個方法在邏輯上是一樣的,都是先透過絕對定位的方式,把inner div抓到特定的位置,然後再把超過的調整回來,只是透過css的transform這個指令,把它在抓回來,而且因為可以直接設定百分比,就不用去看inner這個區塊的高度是多少了。

       .outer{
            background-color:#95AFBA;
            position: relative;
            height:400px;
        }
        .inner{
            background-color: #D5E1A3;
            height:100px;
            width:100px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
效果:
padding

當我們的div沒有設定高度時,我們可以透過padding的指令來達到垂直置中的效果。

CSS:
        .outer{
            background-color:#95AFBA;
            padding: 100px 0;//上下都增加100px的padding
        }
        .inner{
            background-color: #D5E1A3;  
            width:100px;            
        }
效果:


邏輯:透過上下都增加100px的padding就可以,讓inner這個區塊達到垂直置中的效果。inner也可以透過加上padding: 50px 0,這樣的方式,來達到裡面也垂直置中的效果,而且也可以達到文字的垂直置中。如下圖:


CSS: before + inline-block

這個方法,透過CSS當中的偽元素(:before)加上inline-block來達到這樣的效果。

CSS:
        .outer{
            background-color:#95AFBA;
            height:400px;
        }
        .outer:before {
            content: "";
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }
        .inner{
            background-color: #D5E1A3;  
            width:100px;
            height:100px;
            display:inline-block;
            vertical-align: middle;
        }
效果:


想法:在outer的前面加上一個偽元素,同時要inline-block的方式來呈現,這樣就可以再透過vertical-align來加以置中。如果inner這個div想要水平置中的話,可以在outer的地方加上text-align:center就可以達到水平置中的效果了。
        .outer{
            background-color:#95AFBA;
            height:400px;
            text-align:center;
        }
        .outer:before {
            content: "";
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }
        .inner{
            background-color: #D5E1A3;  
            width:100px;
            height:100px;
            display:inline-block;
            vertical-align: middle;
        }
如下圖:




參考資料
CSS Tricks
vanseo design
Yijen's Blog



Share:

0 意見:

張貼留言