css3總結之居中

　　居中在前端佈局上很常見，也很常用，也是最基本的技巧。居中效果在方向控制上基本可以分解成水平居中，垂直居中和水平垂直居中。

　　針對調整的元素不同，具體的處理方式上有些差異。這裡我們先不講絕對定位下的居中，絕對定位下的居中方法很多，變化也多。下麵講的都是非絕對定位下的方法，原則上有兩個，一個是常用，另外一個是相容性最好。

水平居中是居中效果中最常見的，最常用的方法莫過於下列兩種：

HTML：

<div class="box">薛定諤的喵！</div>

1、text-align center

.box {
　　text-align: center;
}

2、定寬元素 margin: 0 auto;

.box {
    width: 96px;
    margin: 0 auto;  
}

結果自然不言而喻，都是居中的，

如果是對於文本的水平居中更傾向於第一點，因為在第二點上壓根就不好計算文本的寬度，即使計算會有小許的誤差，雖然對文字相容性上不是很好，卻很適合於按鈕或者是寬度固定的塊狀元素，

反過來需要說明的是第一點也不單單是對文字有效，而是對內聯（inline-XX）元素都有效，這個我們可以看