網(wǎng)頁中垂直居中的那些事兒

關(guān)于網(wǎng)頁中"垂直居中"的那些事兒，先前也討論過，在網(wǎng)上也搜索了一些文章，有很多種方法，但是兼容所有瀏覽器的也只有三種，分享給大家：

方法一：

我們設(shè)置div為絕對定位【position:absolute】，top設(shè)置為50%，然后定義高度height，取margin-top值為高度一半且為負(fù)【margin-top:-height/2】,實例如下：

Html：

1. <div id="box">圖趣網(wǎng)m.pkvc.cn</div>

css：

1. #box{position:absolute;height:200px;top:50%;margin-top:-100px}

說明：兼容所有瀏覽器，但是當(dāng)用戶縮小瀏覽器窗口，內(nèi)容不見了且滾動條不出現(xiàn)的情況。

方法二：

這種方法，在 content 元素外插入一個 div。設(shè)置此 div height:50%; margin-bottom:-contentheight；content 清除浮動，并顯示在中間。實例如下：

Html：

1. <div id="blank"></div>

2. <div id="box">圖趣網(wǎng)m.pkvc.cn</div>

css：

1. #blank{float:left;height:50%;margin-bottom:-100px}

2. #box{position:relative;height:200px;clear:both}

說明：兼容所有瀏覽器，只是多了個空標(biāo)簽。

方法三：

這個方法比較簡單，設(shè)置行高即可，只適用于單行文本垂直居中。實例如下：

Html：

1. <div id="box">圖趣網(wǎng)m.pkvc.cn</div>

css：

1. #box{height:100px;line-height:100px}

總結(jié)：

實現(xiàn)垂直居中方法比較多，目前我只知道三種支持所有瀏覽器的，如果大俠們有其他的方法，歡迎留言指點。