在前兩次學習讓區塊<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>

繼上次成功畫出水平置中之後，這次希望可以嘗試畫出區塊(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高度 → 優點：支援所有的瀏覽器，語法相當簡單 → 缺點：如果容器有固定高度就無法達到效果

今天想使用HTML畫出一個大格子中包著小格子 (換句話說就是讓多行內容區塊水平置中) 原本以為要讓小格子水平置中只要加上text-align:center，沒想到居然失敗ﾍ(○ﾟ△ﾟ)ﾉ 究竟要怎樣才能達到我想要得呢？ 【Demo】

【Sample code】

 <div style="width:180px; height:200px; margin:5px; padding:10px 5px; background-color:#CCC; border:dashed #FFF 1px; float:left;">
      	<div style="width:160px; height:140px; background-color:#F99; margin:auto;">
        </div>
        <div>
        123
        </div>
 </div>

[說明]

→在要置中的內層Div加入margin:auto;

上面這個方法相容IE6,IE7,IE8,FireFox,Safari…等多款瀏覽器，同時如果使用Table無法置中也用此法解決  ^^   參考資料︰Div或其他HtmlTag容器置中的方式(相容IE6,IE7,IE8,FireFox,Safari)