在寫介面時，經常被元素居中的問題困擾。經過一番查閱資料和摸索，鄙人實踐出了一套常見元素居中的辦法，現在記錄下來，以便日後參考。
元素在標準文件流和非標準流中的表現有所不同，所以居中方法也要分開來進行說明。
標準文件流裡，元素被分為塊級元素和行內元素。常用的塊級元素有div、h1~h7、li等，它們能夠設定寬和高；如果不顯示設定，水平上將撐滿父元素；高度為padding-top和padding-bottom以及子元素的高度決定；行內元素如p、span、a等，不能設定寬高（設定了也不起作用），其寬高由內容寬高決定。
塊級元素
塊級元素居中前必須為其指定明確的寬高。以div為例：
外層內層
第1列為css樣式，內層div背景色為綠色，外層div背景色為黃色，第2列為html**，第3列為效果圖，表示已水平居中。要點在於，子div和父div必須有明確的width。
div的垂直居中沒那麼簡單。
html**如下：
錯誤嘗試一：
父div高200px，子div高100px，只要子div上邊距與父div的上邊距間隔50px，子div就垂直居中了。這個沒錯，只是給父div加padding-top，導致父div的實際占用高度加了50px，即為250px。失敗！
錯誤嘗試二：
想當然地以將子div的上下margin設為auto，但是瀏覽器好像不認識這種樣式，應該是沒有這個用法，太尷尬了。失敗！
錯誤嘗試三：
子div的margin-top設為50px應該是正確的才是呀，為什麼？由於父div沒有border，這時的margin參考點就不是父div而是父div所在一行，即整行的margin-top為50px，所以父子元素整體下落了50px。失敗！
正確寫法：
果然給父div設定乙個無透明的border就就能正確居中了。另一種辦法是，父div不設定border，改為"overflow: hidden;"也行。總之，垂直居中需要自己計算垂直方向的margin值，瀏覽器無法通過"auto"樣式來自動居中。
將水平居中和垂直居中綜合一下，就能實現水平方向和垂直方向同時居中了：
行內元素
行內元素的居中比較簡單，在其父元素上直接使用"text-align: center; "就能滿足絕大多數需求了：
項脊軒，舊南閣子也。室僅方丈，可容一人居。百年老屋，塵泥滲漉，雨澤下注；每移案，顧視，無可置者。
個人沒找到好的辦法，一般是將其轉為塊元素，然後再按照塊級元素的居中方式來的：
項脊軒，舊南閣子也。室僅方丈，可容一人居。百年老屋，塵泥滲漉，雨澤下注；每移案，顧視，無可置者。
別忘記指定高度！!
1）checkbox
chexbox與文字在垂直上一般不是對齊的，很不美觀。這時可對checbox應用"vertical-align: text-bottom;"樣式來調整：
預設表現：
使用樣式後：
2）單行文字垂直居中
我只有一行
即：行高=元素高度
3）多行文字垂直居中
項脊軒，舊南閣子也。室僅方丈，可容一人居。百年老屋，塵泥滲漉，雨澤下注；每移案，顧視，無可置者。
首先確定好行高、文字行數及容納文字容器的實際占用高度（一般不會改變），然後根據這三個資料計算容器的上下padding：
padding-top=padding-bottom=(height – line_height * rows )/ 2
說明;height為容器實際占用高度；line_height為行高，rows為行數。
元素通過浮動或定位脫離標準文件流後，就不再區分塊元素和行內元素，可以直接設定寬高了。下面針對不同的脫標情況來分別說明元素居中處理。
浮動一般是一組元素一起浮動，針對這組元素，需要包在乙個div裡，然後對div進行居中即可：
確定取消
為了使a元素能夠左右緊貼父元素，這裡分別使用左、右浮動，然後對它們的父div作居中就是標準文件流中的方法了。最後記得清除浮動。
絕對定位
outer
inner
居中公式：
水平：left:50%;margin-left:-w/2
垂直：top:50%;margin-top:-h/2
說明：w為需要居中元素的寬度；h為需要居中元素的高度
固定定位
以上樣式不保證相容所有瀏覽器，本人是做後台的，對前端相容性要求不高……（完）
css居中小結
直接設定其父元素 ourter 不管有幾個行內元素，一行 即可搞定，so easy 也非常簡單吶 設定該塊級元素 div 但是！但是！如果該元素的position為absolute的話，該方法會失效。我是這樣理解的 margin為auto即相當於外邊距的值是自動的，相對的，所以在絕對定位下將失效。不...
css居中小結
從css入門就開始接觸，無所不在的，一直備受爭議的居中問題。css居中分為水平居中和垂直居中，水平居中方式也較為常見和統一，垂直居中的方法就千奇百怪了。本文一下 中 outer是父元素的類名，inner塊級代表子元素,span代表行內子元素 直接設定其父元素 ourter不管有幾個行內元素，一行 即...
CSS實現水平垂直居中小結
水平居中實現只要設定margin 0 auto 就可以實現 lang en charset utf 8 水平居中title type text css box style head id box div body html lang en charset utf 8 垂直居中title type t...