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

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

方法一：

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

Html：

1. <div id="box">圖趣網(wǎng)irelandcustomcontracting.com</div>

css：

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

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

方法二：

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

Html：

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

2. <div id="box">圖趣網(wǎng)irelandcustomcontracting.com</div>

css：

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

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

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

方法三：

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

Html：

1. <div id="box">圖趣網(wǎng)irelandcustomcontracting.com</div>

css：

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

總結(jié)：

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