居中是我們使用css來布局時常遇到的情況蒜危。使用css來進(jìn)行居中時她君，有時一個屬性就能搞定域仇，有時則需要一定的技巧才能兼容到所有瀏覽器，本文就居中的一些常用方法做個簡單的介紹作烟。
1.使用margin:auto
具體來說就是把要居中的元素的margin-left和margin-right都設(shè)為auto愉粤，此方法只能進(jìn)行水平的居中，且對浮動元素或絕對定位元素?zé)o效拿撩。
2.使用text-align:center
這個沒什么好說的衣厘，只能對圖片，按鈕压恒，文字等行內(nèi)元素(display為inline或inline-block等)進(jìn)行水平居中影暴。但要說明的是在IE6、7這兩個奇葩的瀏覽器中探赫，它是能對任何元素進(jìn)行水平居中的型宙。
3.使用line-height讓單行的文字垂直居中
把文字的line-height設(shè)為文字父容器的高度，適用于只有一行文字的情況伦吠。
4.使用表格
如果你使用的是表格的話妆兑，那完全不用為各種居中問題而煩惱了魂拦，只要用到 td(也可能會用到 th)元素的 align=”center” 以及 valign=”middle” 這兩個屬性就可以完美的處理它里面內(nèi)容的水平和垂直居中問題了,而且表格默認(rèn)的就會對它里面的內(nèi)容進(jìn)行垂直居中。如果想在css中控制表格內(nèi)容的居中搁嗓，垂直居中可以使用 vertical-align:middle芯勘，至于水平居中，貌似css中是沒有相對應(yīng)的屬性的,但是在IE6腺逛、7中我們可以使用text-align:center來對表格里的元素進(jìn)行水平居中荷愕，IE8+以及谷歌、火狐等瀏覽器的text-align:center只對行內(nèi)元素起作用屉来，對塊狀元素?zé)o效路翻。
HTML代碼：
<table>
<tr>
<td>
<div>123</div>
</td>
</tr>
</table>
CSS代碼：
td {
width: 200px;
height:200px;
border:1px solid red;
vertical-align:middle;
text-align:center;
}
div {
width: 100px;
height:100px;
border: 1px solid rgba(0,0,0,0.3);
background: #ffffff;
}
在ie6、7中可以通過css的text-algin來控制表格內(nèi)容的水平方向的對齊茄靠，無論內(nèi)容是行內(nèi)元素還是塊狀元素都有效茂契。
但在ie8+以及chrome、firefox等瀏覽器中的text-align:center對塊狀元素?zé)o效慨绳，只能用表格自有的align屬性掉冶。
運行效果：
5、使用display:table-cell來居中
對于那些不是表格的元素脐雪，我們可以通過display:table-cell 來把它模擬成一個表格單元格厌小，這樣就可以利用表格那很方便的居中特性了。
HTML代碼：
<div class="div1">
<div class="div2"></div>
</div>
CSS代碼：
.div1 {
display:table-cell;
vertical-align:middle;
text-align:center;
width: 200px;
height:200px;
border:1px solid red;
}
.div2 {
width: 100px;
height:100px;
border: 1px solid rgba(0,0,0,0.3);
background: #ffffff;
display:inline-block;
}
但是战秋，這種方法只能在IE8+璧亚、谷歌、火狐等瀏覽器上使用脂信，IE6癣蟋、IE7都無效。
運行效果：
上面所說的都是很基礎(chǔ)的方法狰闪，下面就來說一些需要使用一些技巧的居中方法疯搅。
6.使用絕對定位來進(jìn)行居中
此法只適用于那些我們已經(jīng)知道它們的寬度或高度的元素。
絕對定位進(jìn)行居中的原理是通過把這個絕對定位元素的left或top的屬性設(shè)為50%,這個時候元素并不是居中的埋泵，而是比居中的位置向右或向左偏了這個元素寬度或高度的一半的距離幔欧，所以需要使用一個負(fù)的margin-left或margin-top的值來把它拉回到居中的位置，這個負(fù)的margin值就取元素寬度或高度的一半丽声。
CSS代碼
.div1 {
width: 200px;
height:200px;
border:1px solid red;
position:relative;
}
.div2 {
width: 100px;
height:100px;
border: 1px solid rgba(0,0,0,0.3);
background: #ffffff;
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
}
運行效果：
如果只想實現(xiàn)一個方向的居中礁蔗，則可以只使用left , margin-left 來實現(xiàn)水平居中，使用top , margin-top來實現(xiàn)垂直居中雁社。
7瘦麸、另一種使用絕對定位來居中的方法
此法同樣只適用于那些我們已經(jīng)知道它們的寬度或高度的元素，并且遺憾的是它只支持IE9+,谷歌歧胁，火狐等符合w3c標(biāo)準(zhǔn)的現(xiàn)代瀏覽器滋饲。
CSS代碼
這里如果不定義元素的寬和高的話厉碟，那么他的寬就會由left,right的值來決定，高會由top,bottom的值來決定屠缭，所以必須要設(shè)置元素的高和寬箍鼓。同時如果改變left，right , top , bottom的值還能讓元素向某個方向偏移呵曹，大家可以自己去嘗試款咖。
.div1 {
width: 200px;
height:200px;
border:1px solid red;
position:relative;
}
.div2 {
width: 100px;
height:100px;
border: 1px solid rgba(0,0,0,0.3);
background: #ffffff;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
運行效果：
8、使用浮動配合相對定位來進(jìn)行水平居中
此方法也是關(guān)于浮動元素怎么水平居中的解決方法奄喂，并且我們不需要知道需要居中的元素的寬度铐殃。
浮動居中的原理是：把浮動元素相對定位到父元素寬度50%的地方，但這個時候元素還不是居中的跨新，而是比居中的那個位置多出了自身一半的寬度富腊，這時就需要他里面的子元素再用一個相對定位，把那多出的自身一半的寬度拉回來域帐，而因為相對定位正是相對于自身來定位的赘被，所以自身一半的寬度只要把left 或 right 設(shè)為50%就可以得到了，因而不用知道自身的實際寬度是多少肖揣。
這種使用浮動配合相對定位來居中的方法民假，優(yōu)點是不用知道要居中的元素的寬度，即使這個寬度是不斷變化的也行龙优；缺點是需要一個多余的元素來包裹要居中的元素羊异。
HTML代碼
<div class="div1">
<div class="div2">
<div class="div3">水平居中</div>
</div>
<div class="div2">
<div class="div3">寬度不同</div>
</div>
<div class="div2">
<div class="div3">確實</div>
</div>
</div>
CSS代碼
.div1 {
width: 300px;
height:200px;
border:1px solid red;
position:relative;
}
.div2 {
float:left;
position:relative;
left:50%;
clear:both;
}
.div3 {
border:1px solid green;
position:relative;
left:-50%;
}
運行效果：
9、利用font-size來實現(xiàn)垂直居中
如果父元素高度是已知的彤断，要把它里面的子元素進(jìn)行水平垂直居中玫坛，則可以使用這種方法附帽，且子元素的寬度或高度都不必知道斥废。
該方法只對IE6和IE7有效修己。
該方法的要點是給父元素設(shè)一個合適的font-size的值赴蝇，這個值的取值為該父元素的高度除以1.14得到的值菩浙，并且子元素必須 是一個inline或inline-block元素，需要加上vertical-align:middle屬性句伶。
至于為什么是除以1.14而不是其他的數(shù)劲蜻，還真沒有人知道，你只需要記住1.14這個數(shù)就行了考余。
在方法5中說過在IE8+先嬉、火狐谷歌等現(xiàn)在瀏覽器中可以用display:table-cell來進(jìn)行居中，而這里的font-size的方法則適用于IE6和IE7楚堤，所以把這兩種方法結(jié)合起來就能兼容所有瀏覽器了：
CSS代碼
.div1 {
width: 300px;
height:200px;
border:1px solid red;
font-size:175.4px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
.div2 {
vertical-align:middle;
display:inline-block;
font-size:12px;
width:50px;
height:50px;
background:#0FF;
}
上面的例子中因為要居中的元素是一個塊狀元素疫蔓，所以我們還需要把他變成行內(nèi)元素含懊，如果要居中的元素是圖片等行內(nèi)元素，則可以省略此步衅胀。
另外岔乔，如果 vertical-align:middle 是寫在父元素中而不是子元素中，這樣也是可以的滚躯，只不過計算font-size時使用的 1.14 這個 數(shù)值要變成大約 1.5 這個值雏门。
運行效果：
