這個題目似乎解決的辦法很多，JS是最能夠確保各種瀏覽器中一致性的，但是仍然可以使用CSS的方式來解決。這個問題分解為兩個方面，第一解決左右居中的問題，第二解決上下居中的問題。
1、左右居中。
左右居中最為簡單，使用 text-align:center; 就可以讓絕大多數的對象居中對齊，並且這個屬性也獲得了幾乎全部瀏覽器的支持。實際上，這個屬性定義的是塊級對象內部文字的對齊方式，內部的文字或者圖像一般是內聯對象。
也許有人會提到，為什么不用 margin:0 auto;這個辦法呢？這是一個好問題，在做居中布局的頁面時，這是我們最常用的讓DIV容器居中的辦法。margin作用於塊級元素，而是否作用於其他內斂元素，不同的瀏覽器有着不同的解釋，因此對於左右居中，沒有使用這個方法。
2、上下居中。
上下居中，有兩種方法，一種是負margin的辦法，這種對於固定寬度的容器，非常的好用。另外一種就是適應於高度不固定的情形，即使用 vertical-align 屬性。Vertical-align 屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。
3、最后代碼
綜上，可以得出對於高度、寬度都不固定的容器，如何讓其做到水平、垂直居中：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ /> 5 <title>水平、垂直居中</title> 6 <style type=“text/css”> 7 #container_outer { display:table; width:1200px; height:1000px; overflow:hidden; margin-left:50px; _position:relative; } 8 #container_inner { vertical-align:middle; display:table-cell; text-align:center; _position:absolute; _top:50%; _left:50%; } 9 #content { color:#fff; border:1px solid #000; display:inline-block; _position:relative; _top:-50%; _left:-50%; } 10 </style> 11 <body> 12 <div id=“container_outer”> 13 <div id=“container_inner”> 14 <div id=“content”> 15 動態內容... 16 </div> 17 </div> 18 </div> 19 20 </body> 21 </html>
參考資料：