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