div水平、垂直置中

在網頁製作中，常常會遇到需要圖片水平、垂直置中的情況，
水平置中還算簡單，但垂直置中就麻煩得多了！
垂直置中的解法其實也不少，但常常都會讓階層變得很多，
像以前也常用的display:table-cell;的做法，就需要在區塊外面多包一層。

在這邊分享一個最近得知，覺得方便很多的方法！
假設我們要把img在div裡置中：

HTML：
＜div＞＜img＞＜/div＞

CSS：
div { position:relative; }
div img { position:absolute; top:0; right:0; left:0; bottom:0; margin:auto; }

只要把img定位在div裡，然後四邊的定位都為０，最後加上margin:auto;就可以讓圖片置中啦！
是不是很簡單，不用在包來包去的多方便！


如果不是很理解，下面提供範例讓大家參考：



HTML設定：
＜div id="actBox"＞
＜div class="actPic"＞
＜img src="active_detail_pic_00.jpg" width="240" height="150" border="0"＞
＜/div＞
＜div class="actTitle"＞2014/05/05 標題標題＜/div＞
＜div class="actContent"＞內容內容內容內容。內容內容內容內容內容內容內容內容內容內容內容內容。內容內容內容內容...＜/div＞
＜/div＞

CSS設定：
#actBox {
width:270px;
border-top:#95877b 8px solid;
border-left:#95877b 1px solid;
border-right:#95877b 1px solid;
border-bottom:#95877b 1px solid;
}

/*--圖片置中效果在這邊--*/
.actPic {
background-color:#d8d0cc;
border-bottom:#95877b 1px solid;
text-align:center;
width:270px;
height:180px;

position:relative;
}

.actPic img {
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
}
/*--END-圖片置中效果在這邊--*/

/*--日期標題--*/
.actTitle {
display:block;
color:#89613d;
font-size:16px;
text-decoration:none;
height:36px;
line-height:36px;
overflow:hidden;
padding:0 10px;
border-bottom:#95877b 1px solid;
}

/*--內文--*/
.actContent {
display:block;
color:#4d4d4d;
font-size:14px;
text-decoration:none;
height:56px;
overflow:hidden;
padding:10px;
}