繼上次成功畫出水平置中之後,這次希望可以嘗試畫出區塊(DIV)在區塊(DIV)中垂直置中(專業速語會說讓塊狀元素中的塊狀元素垂直置中)
【塊狀元素置中,容器高度不確定】 =>外層上下設置相同的padding
【Sample code】
<!--- CSS code ---> <style type='text/css'> .outer { width:180px; background-color:#CCC; border:dashed #FFF 1px; padding-bottom:30px; padding-top:30px; } .inner { width:160px; height:140px; background-color:#F99; } </style> <!--- HTML code ---> <div class="outer"> <div class="inner"></div> </div>
→在外層的div設定相同padding-buttom、padding-top高度 → 優點:支援所有的瀏覽器,語法相當簡單 → 缺點:如果容器有固定高度就無法達到效果
【塊狀元素置中,容器高度固定】 =>Div模擬表格的效果
使用Div模擬表格的效果,把display屬性設為“table-cell”以及vertical-align屬性設為“middle” 【Sample code】
<!--- CSS code ---> <style type='text/css'> .box { width:180px;/*寬度一定要設定*/ height:200px;/*高度一定要設定*/ display:table; } .outer { width:180px; height:200px; background-color:#CCC; border:dashed #FFF 1px; display:table-cell; vertical-align:middle; } .inner { width:160px; height:140px; background-color:#F99; } </style> <!--- HTML code ---> <div class="box"> <div class="outer"> <div class="inner">把這個粉紅區塊垂直置</div> </div> </div>
→在最外層的div設定display:table; →在內層的div設定display:table-cell;以及vertical-align:middle; →優點:優點:語法相當簡單,置中元素的內容超過範圍,區塊會自動調整,實際上也沒有高度限制了 →缺點:IE8以下不支援,因為display:table語法在IE6、7不被支援 所以,為了相容於IIE6、7,必須增加一個div,並使用hack進行ㄧ修正
<!--- CSS code ---> <style type='text/css'> .box { width:180px;/*寬度一定要設定*/ height:200px;/*高度一定要設定*/ display:table; position:relative; float:left; } .outer { width:180px; height:200px; background-color:#CCC; border:dashed #FFF 1px; display:table-cell; vertical-align:middle; text-align:center; *position: absolute; /* for IE6,7 */ *top: 50%; /* for IE6,7 */ *left: 50%; /* for IE6,7 */ } .inner { width:160px; height:140px; background-color:#F99; *position: relative; /* for IE6,7 */ *top: -50%; /* for IE6,7 */ *left: -50%; /* for IE6,7 */ } </style> <!--- HTML code ---> <div class="box"> <div class="outer"> <div class="inner">把這個粉紅區塊垂直置</div> </div> </div>
→使用"*+屬性:值"宣告,當使用 IE6、7使用讀取*語法 →在最外層的div設定*position:relative;,讓後面的設定產生作用 →外層元素設置*position:absolute跟*top:50%,讓區塊元素的左上角原點下降到容器元素中心點 →對最內層設置*position:relative和*top:-50%和*left:-50%,讓區塊元素往上往左提升自己高度的一半
【塊狀元素置中,容器高度固定】 =>絕對定位的方法
使用position:absolute的絕對定位,並將高度設定為top:50%,以及margin-top設定為高度的一半margin-top:-70px; 【Sample code】
<!--- CSS code ---> <style type='text/css'> .outer { width:180px; height:200px; background-color:#CCC; border:dashed #FFF 1px; position:relative; } .inner { width:160px; height:140px; background-color:#F99; position:absolute; top:50%; margin-top:-70px; } </style> <!--- HTML code ---> <div class="outer"> <div class="inner">把這個粉紅區塊垂直置</div> </div>
[說明] →在最外層的div設定*position:relative;,讓後面的設定產生作用 →在最內層的div設定 position:absolute;,使用絕對定位 →在最內層的div設定 top:50%; ,讓內層定位在外層div高度的一半 →在最內層的div設定margin-top:-70px; ,把內層高度往回拉一半 →優點:語法簡短,支援所有瀏覽器 →缺點:div高度固定,如果資料超過需要加上overflow:scroll,會出現scroll bar,會影響美觀度
【塊狀元素置中,容器高度固定】 =>使用一個空<div>達成
這種方式是在要居中的元素前面設置一個空的<div>來達成 【Sample code】
<!--- CSS code ---> <style type='text/css'> html,body { height: 100%; } .outer { width:180px; height:200px; background-color:#CCC; border:dashed #FFF 1px; } .empty_div { float:left; height:50%; /*相對於父元素高度的50%*/ margin-bottom: -70px; /*值大小為居中元素高度的一半*/ width:1px; /* only for IE7 */ } .inner { width:160px; height:140px; background-color:#F99; clear:both; /*清除浮動*/ position:relative; } </style> <!--- HTML code ---> <div class="outer"> <div class="empty_div"></div><!--空的Div--> <div class="inner">把這個粉紅區塊垂直置<br /> </div> </div>
[說明] →在居中元素前設置一個空白<div>,並把屬性設定為height:50%;,margin-bottom為居中元素高度的一半,並且設定置左浮動 float:left; →空白的<div>需要設width:1px; 以相容IE7 →在居中元素設定清除浮動clear:both;並且設定為相對定位 position:relative; →注意!如果居中元素是放在body中的話,需要設定height:100%; →優點:除IE7 需要設定width:1px;之外,相容所有瀏覽器,而且置中元素的內容超過範圍,區塊會自動調整出現scroll bar →優點:另外若置中元素的父層是body,那即使視窗被USER拖曳拉小,div也一樣會置中 →缺點:高度固定,IE7需要調整 參考資料:CSS制作水平垂直居中对齐、CSS Vertical Align(用純CSS解決div垂直置中)、[CSS] 如何做出水平&垂直置中