如何讓區塊(DIV)在區塊(DIV)中 垂直置中 如何讓區塊(DIV)在區塊(DIV)中 垂直置中
      ez      2013-08-28

繼上次成功畫出水平置中之後,這次希望可以嘗試畫出區塊(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] 如何做出水平&垂直置中


標籤:   CSS、  DIV垂直置中、  DIV置中、  HTML、  前端入門、  前端幼幼班

我要留言