在某些特定的場合，在沒有知道寬度的情況下卻要求水平居中，前段時間在寫分頁的時候碰到了這個問題。當時在網上找了一些解決方法，並選了乙個最合適的方法，現將當時整理的一些方法發出。下列以分頁作為演示說明：
方案
一、利用浮動的包裹性和相對定位百分比資料值特性,傳說稱之為「相對浮動」
.unknow_width_center1.unknow_width_center1 li
通過給父元素設定浮動float,再設定父元素的position屬性為relative和left:50%;子元素設定position:relative和left:-50%來實現水平居中。
可以保留塊級元素仍然是以display:block的形式顯示,不會新增無意義的標籤,不新增巢狀深度。缺點是設定了position:relative;帶來了一些***，並且需要閉合（清除）浮動。
方案
二、利用text-align屬性特性（text-align:center 對於ie6、7塊級和內聯級都可以水平居中。其它瀏覽器內聯級(內聯塊級，文字)元素才可以水平居中，塊級無效。 ）強制定義為內聯 display:inline
.unknow_width_center2.unknow_width_center2 li
將子元素設定為內聯居中，那麼大家都知道的display:inline內聯元素寬高是不可以設定的，侷限性太大，不宜使用。
方案
三、利用table的屬性特性
.unknow_width_center3.unknow_width_center3 ul
.unknow_width_center3 ul li
是使用table作為容器的方法來實現。新增了無意義的標籤。table標籤本身並不是塊級元素,當我們不設定table的寬度的話,他裡面的寬度是由他內部元素的寬度撐起來的。但即使我們沒有設定table的寬度,直接設定table的外邊距margin:0 auto;就可以實現水平居中了!這樣我們就可以通過設定table水平居中,間接使裡面的內容居中。
方案
四、利用內聯塊display:inline-block的text-align屬性
.unknow_width_center4.unknow_width_center4 ul li
ie6/7下直接設定display:inline-block的居中無效，這裡在ie6/7下設定了display:inline，神奇的是竟然可以設定寬高及其垂直方向的內外邊距。缺點是display:inline-block會引起一些間隙，當然有看起來礙眼解決方案。
方案
五、利用table table-cell
.unknow_width_center5 ul.unknow_width_center5 li
ie6/ie7不支援table-cell屬性，所以該方法也不適用ie6/ie7,如果需要相容在這基礎上加東西也很蛋疼。
個人偏向使用方法一」相對浮動」，適用廣泛**簡潔且不會出現什麼問題，可惜就是每次使用的時候要考慮浮動的處理。
CSS水平居中的幾種方法
如果被設定元素為文字 等行內元素時，水平居中可以通過父元素設定text align center來實現。html style text align center 我是文字，哈哈，我想要在父容器中水平居中顯示。div body 當被設定元素為塊狀元素時用 text align center 就不起作用...
垂直水平居中的幾種方法
father son 效果圖 當元素絕對定位時，它會根據離他最近的乙個非static定位的父元素進行定位，這裡應該根據父元素定位。father son 效果圖 首先用top 50 和left 50 讓子元素的座標原點 左上角 移動到父元素的中心，然後再利用負margin讓它往左偏移自身寬的一半，再往...
html元素水平居中的幾種方法
下面我將一一的介紹關於html元素水平居中的幾種方式 一 對於行內元素採用text align center 的方式 二 採用margin 0 auto 來實現水平居中顯示 三 用table實現 四 塊級的元素但是通過轉換成行內元素來實現塊級元素的水平居中顯示 五 父子元素都採用相對定位，父元素le...