1.行內元素的水平居中（父元素設定text-align:center）
style="width:250px;height:100px;background:#ccc;text-align:center;">
行內元素水平居中span>
div>
body>效果圖如下：
2.塊級元素水平居中（margin：0 auto）
style="width:250px;height:100px;border:1px solid #ccc;text-align:center;">
style="width:100px;height:50px;border:1px solid red;margin:0 auto;">塊級元素水平居中div>
div>
body>效果圖如下：
3.浮動元素水平居中
a.寬度不固定的浮動元素水平居中
class="outerbox">
class="innerbox">我是浮動的div>
div>
body>
.outerbox
.innerbox
外部和內部div的盒模型如下圖所示：
外部div：
外部div的包含塊為body，寬度為1350，left:50%，所以margin等於675px.
內部div：
內部div的包含塊為外部div，外部div寬度為82px，right:50%，所以margin為41px;
b.寬度固定的浮動元素水平居中
class="floatbox">我是浮動的div>
body>
.floatbox
.center
因div有固定的寬度並且position:absolute;left:0;right:0，所以margin:0 auto時會根據螢幕大小自動算出左右margin。
** 經驗分享：水平居中的主要屬性有
1. text-align:center;
2. margin:0 auto
3. position:relative|absolute; left:50%; **
1.行內元素垂直居中（height與line-height值相等）
行內元素垂直居中span>span
2.塊級元素垂直居中（height與line-height值相等）a.父元素高度不確定的情況
父元素的padding-top和padding-bottom一樣
例如：
class="outerbox">
class="innerbox">
div>
div>
.outerbox
.innerbox
b.父元素高度確定的情況
第一步：父元素height與line-height設定相等；
第二步：需要垂直居中的元素設定以下css屬性
vertical-align
:middle;/*垂直居中對齊*/
display
:inline-block;/*塊級元素轉換為行內元素*/
class="outerbox">
class="innerbox">
div>
div>
.outerbox
.innerbox
正常元素 浮動元素以及絕對定位元素的居中方式
一 元素的水平居中 1 行內元素的水平居中 利用父元素設定text align center 行級元素垂直居中 2 塊級元素的水平居中 利用margin 0 auto 塊級元素 3 浮動元素的水平居中 寬度固定的浮動元素 relative left 50 outerbox寬度不固定的浮動元素 out...
塊級元素以及行內元素居中顯示
title type text css container center style head id container id center div div body html 以上方法是我認為最好用的，不過缺點是需要知道元素的寬度和高度。通過設定需要定位的div元素為position absolu...
如何居中乙個浮動元素？
如何居中浮動乙個元素？以前也從來沒有注意過這個問題，是這次在找工作的時候，網上搜前端面試題的時候才看到的，剛開始以為很簡單，後來發現其實margin負值，自己真的不懂，就開始在網頁上搜，後來就慢慢看懂了。1.首先推薦這個部落格，明白什麼是margin負值以及它有什麼作用。前端小萌新剛開始更博，如果有...