轉載未知大小的圖片在一個已知大小容器中的水平和垂直置中（二）_經驗交流

這是一個未知大小的圖片在一個已知大小容器中的水平和垂直置中的例子，原文標題：“Centering an image of unknown size in an outer container of known size”， 作者：Stu Nicholls form：http://www.cssplay.co.uk/menu/centered.html ，發表日期：15th October 2006。

此文由forestgan於2006-10-17翻譯發表，更多文章。

這個水平和垂直置中的例子能正常工作在IE5.x, IE6, IE7, Firefox, Opera, Mozilla, Netscape，為IE和非IE分別寫了二套簡單的樣式。

IE使用inline-blocks，非IE使用table-cell and vertical-align。

CSS

/* for non-IE browsers */div.holder {width:750px; height:300px; background:#f8f8f8; border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle;}}

xhtml

作者的例子是單個的，我擴充了下，一頁6張圖片，可適用於像冊和產品展示等地方，示範地址。

