-
最常用的水平居中法：把margin設(shè)為auto
具體來說就是把要居中的元素的margin-left和margin-right都設(shè)為auto阅羹，此方法只能進行水平的居中玫镐，且對浮動元素或絕對定位元素?zé)o效。而且需要滿足三個條件
? 元素定寬
? 元素為塊級元素或行內(nèi)元素設(shè)置display:block
? 元素的margin-left和margin-right都必須設(shè)置為auto 使用 text-align:center
這個沒什么好說的菱魔，只能對圖片拄丰，按鈕现斋，文字等行內(nèi)元素(display為inline或inline-block等)進行水平居中喜最。但要說明的是在IE6、7這兩個奇葩的瀏覽器中步责，它是能對任何元素進行水平居中的返顺。使用line-height讓單行的文字垂直居中
把文字的line-height設(shè)為文字父容器的高度，適用于只有一行文字的情況蔓肯。-
使用絕對定位來進行居中
此法只適用于那些我們已經(jīng)知道它們的寬度或高度的元素遂鹊。
絕 對定位進行居中的原理是通過把這個絕對定位元素的left或top的屬性設(shè)為50%,這個時候元素并不是居中的，而是比居中的位置向右或向左偏了這個元素 寬度或高度的一半的距離蔗包，所以需要使用一個負的margin-left或margin-top的值來把它拉回到居中的位置秉扑，這個負的margin值就取元素寬度或高度的一半。
170821_1.png
運行效果：
- 另一種使用絕對定位來居中的方法
此法同樣只適用于那些我們已經(jīng)知道它們的寬度或高度的元素调限，并且遺憾的是它只支持IE8+,谷歌舟陆，火狐等符合w3c標(biāo)準(zhǔn)的現(xiàn)代瀏覽器。
下面用一段代碼來了解這種方法：
運行效果：
- 使用浮動配合相對定位來進行水平居中
此方法也是關(guān)于浮動元素怎么水平居中的解決方法耻矮，并且我們不需要知道需要居中的元素的寬度秦躯。
浮動居中的原理是：把浮動元素相對定位到父元素寬度50%的地方，但這個時候元素還不是居中的裆装，而是比居中的那個位置多出了自身一半的寬度踱承，這時就需要他里面的子元素再用一個相對定位，把那多出的自身一半的寬度拉回來哨免。在這里包裹層wraper沒有設(shè)定實際寬度茎活，將會自適應(yīng)child的寬度，所以我們只要設(shè)置left:-50%就相當(dāng)于再移動該元素的一般的寬度了琢唾。這樣我們不需要知道子元素的具體寬度载荔。
這種使用浮動配合相對定位來居中的方法，優(yōu)點是不用知道要居中的元素的寬度采桃，即使這個寬度是不斷變化的也行懒熙；缺點是需要一個多余的元素來包裹要居中的元素丘损。
看下代碼：
170821_4.png
運行結(jié)果：
注意：雖然看起來垂直也居中了，但實際上數(shù)值是有差距的工扎，因為子元素設(shè)置的width或者height是百分比的值跟父元素的值有關(guān)号俐。
設(shè)置width為百分比，不需要父元素明確設(shè)置width定庵。但是子元素設(shè)置height百分比，父元素必須明確設(shè)置高度踪危，原因如下兩圖蔬浙。因為上面的父元素沒有設(shè)置高度，所以top沒有起作用贞远，但是left起作用畴博，是因為父元素width不是強制性的。所以這里的.child不能設(shè)置top蓝仲，這個元素會有一定的偏移量俱病。
寬度：
高度：
總結(jié)來說就是：The offset is a percentage of the containing block's width (for 'left' or 'right') or height (for 'top' and 'bottom'). For 'top' and 'bottom', if the height of the containing block is not specified explicitly (i.e., it depends on content height), the percentage value is interpreted like 'auto'.
- 使用CSS3的transform屬性
- 使用Flex布局
前6種轉(zhuǎn)自http://www.cnblogs.com/2050/p/3392803.html并對一些錯誤進行了修改
