對於居中乙個元素有很多種方法，同時也分很多種情況；比如水平居中乙個塊級元素、垂直居中乙個浮動元素或者是乙個絕對定位元素等等；下面就分情況進行總結：
（一）水平居中
1、水平居中乙個塊級元素
為塊級元素新增「margin:0 auto;」
2、水平居中乙個行級元素
在父級元素中新增「text-align:center;」
3、水平居中乙個浮動元素
3.1 寬度不固定的浮動元素
樣式為：
3.2 寬度固定的浮動元素
html**跟上面的一樣，然後css樣式為：
效果圖如下：這是垂直水平居中
但是如果將position的值設定為「relative」；結果會變成：這是水平居中，但有一半的高度超出了螢幕的上方
3.3 水平居中乙個絕對定位的元素
水平居中總結：水平居中的屬性主要有以下三種
（1）text-align：center；
（2）margin：0 auto；
（3）position:relative(absolute);left:50%;
（二）垂直居中
1、垂直居中乙個行級元素：設定height和line-height的值一樣
2、垂直居中乙個塊級元素
2.1 父級元素高度固定
樣式為：
2.2 父級元素高度不固定
html**和上面的是一樣的，css樣式如下：
inline block中居中元素
luo 有這樣乙個父元素，被顯示為inline block元素，那問題是，如何居中裡面的元素呢？先看看父元素的樣式 a設定了元素內居中，這個設定只會水平居中，下面進行垂直居中 a before b注意到了嗎？我們使用的是vertical align屬性，設定成middle。但是問題來了，僅僅設定成這...
css中元素的水平居中
關於css元素的水平居中，有兩種辦法可以得到 一種是 自動定義margin的左右寬度來實現，一種是用position的相對定位和絕對定位來實現。舉乙個簡單的例子 href link onea li href link twoa li href link threea li href link fou...
Firefox中元素的居中對齊
web開發中，為了支援不同的瀏覽器，是一件很麻煩的事情。所以，程式設計師都希望瀏覽器越少越好，那將省去好多任務作。今天，把這段時間開發的乙個專案拿到firefox下測試，發現基本情況還不錯，畢竟css已經玩的比較熟了，只要大家都遵守國際標準，情況會好很多。可是，還是不太對，怎麼頁面都跑到左邊來了？可...