在前兩次學習讓區塊<div>內的塊狀元素水平、上下置中，這次要來個相對容易的，讓區塊<div>內的單行元素進行水平垂直置中  

【文字、圖片水平置中】→在元素容器中加入text-align:center即可

文字水平置中

【Sample code】

<!--- CSS code --->
<style type='text/css'>
.container {
	background-color:#8D9FB3;
	width:200px;
	height:200px;
	text-align:center;
	}
</style>

<!--- HTML code  --->
<div class="container">
文字水平置中
</div>
<div class="container">
	<img src="http://www.ez2o.com/LIB/ezThumbnail/images/164/1.jpg"/>
</div>

【單行文字垂直置中】→設定line-height等於容器高度

  【Sample code】

<!--- CSS code --->
<style type='text/css'>
.container {
	background-color:#8D9FB3;
	width:200px;
	height:200px;
	line-height:200px;
	}
</style>

<!--- HTML code  --->
<div class="container">
文字水平置
</div>

【圖片、多行文字垂直置中Demo】

圖片跟多行文字垂直置中跟讓區塊(DIV)在區塊(DIV)中 垂直置中是一樣的方式，這邊就選擇使用相容度最高而且相當容易使用的空<div>法   【Sample code】

<!--- CSS code --->
<style type='text/css'>
.container_div {
	background-color:#CCC;
	width:200px;
	height:200px;
	}

.empty_div {
	float:left;
	height:50%; /*父元素高度的50%*/
	margin-bottom:-65px;/*置中元素高度的一半*/
	*width::1px; /*only for IE7*/
	}
.content_div {
	clear:both; /*清除浮動*/
	height:130px;
	position:relative
	}

</style>

<!--- HTML code  --->
<div class="container_div">
	<div class="empty_div">
    </div>
    <div class="content_div">
    <img src="http://www.ez2o.com/LIB/ezThumbnail/images/164/1.jpg" />
    </div>
</div>
<div class="container_div">
	<div class="empty_div">
    </div>
    <div class="content_div">
    這行應該要居中
    </div>
</div>

詳細請參考 如何讓區塊(DIV)在區塊(DIV)中 垂直置中