by zhangxinxu from http://www.

本文地址：http://www./wordpress/?p=3794

一、悠悠哉哉說點(diǎn)什么

本來我有個(gè)很好的計(jì)劃，就是本文用漫畫來寫，把話癆的火影漫畫的文字重新抹掉，然后填本文相關(guān)的技術(shù)文字 。

哈，是不是很好??！但是，想到了一個(gè)殘酷的現(xiàn)實(shí)——流量，我一個(gè)月只有30G流量，幾乎月月爆棚，要是這里全部用火影的圖片要實(shí)現(xiàn)，頁面沒個(gè)1M搞不下來哈~，文章要是3000訪問，就差不多3G，天哪，我表示壓力很大。于是，我決定還是中規(guī)中矩用文字加一兩小截圖表示下吧~

二、絕對(duì)定位元素的居中實(shí)現(xiàn)

如果要問如何CSS實(shí)現(xiàn)絕對(duì)定位元素的居中效果，很多人心里已經(jīng)有答案了。

兼容性不錯(cuò)的主流用法是：

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 寬度的一半 */
}

但，這種方法有一個(gè)很明顯的不足，就是需要提前知道元素的尺寸。否則margin負(fù)值的調(diào)整無法精確。此時(shí)，往往要借助JS獲得。

CSS3的興起，使得有了更好的解決方法，就是使用transform代替margin. transform中translate偏移的百分比值是相對(duì)于自身大小的，于是，我們可以：

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%為自身尺寸的一半 */
}

于是乎，無論絕對(duì)定位元素的尺寸是多少，其都是水平垂直居中顯示的。

然，問題很明顯，兼容性不好。IE10+以及其他現(xiàn)代瀏覽器才支持。中國盛行的IE8瀏覽器被忽略是有些不適宜的（手機(jī)web開發(fā)可忽略）。

實(shí)際上，絕對(duì)定位元素的居中實(shí)現(xiàn)還有另外一種方法，可以說是權(quán)衡了上面的尺寸自適應(yīng)以及兼容性的一個(gè)方案，其實(shí)現(xiàn)的核心是margin:auto.

三、margin:auto實(shí)現(xiàn)絕對(duì)定位元素的居中

首先，我們來看下CSS代碼：

.element {
    width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了這個(gè)就自動(dòng)居中了 */
}

代碼兩個(gè)關(guān)鍵點(diǎn)：

1. 上下左右均0位置定位；


2. margin: auto

于是，就居中了。上面代碼的width: 600px height: 400px僅是示意，你修改為其他尺寸，或者不設(shè)置尺寸（需要是圖片這種自身包含尺寸的元素），都是居中顯示的。很有意思的~~

您可以狠狠地點(diǎn)擊這里：margin:auto與絕對(duì)定位元素的垂直居中demo

點(diǎn)擊demo頁面中間的按鈕，讓原本static的框框absolute化，可以發(fā)現(xiàn)其是水平垂直居中的。

不知諸位新技能get否？

對(duì)了，該方法IE8+以及其他瀏覽器都是OK的。

上圖為8~10月份，百度流量統(tǒng)計(jì)員給出的瀏覽器訪問數(shù)據(jù)。IE6+IE7大概14%的樣子。顯然，很快，此方法就要開始稱霸PC武林了！

三、悠悠哉哉再說點(diǎn)什么

可能有人會(huì)問，為何margin: auto;會(huì)讓絕對(duì)定位元素居中了呢？哈哈，原因是………………

.

.

.

.

我也不知道！

可能需要查詢規(guī)范尋找一些線索。但，待會(huì)兒我還有籃球比賽，恕我沒有足夠精力去深入。歡迎有相關(guān)研究的達(dá)人分享其內(nèi)部機(jī)制原理，不甚感謝！

歡迎討論，歡迎交流。

原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明來自張?chǎng)涡?鑫空間-鑫生活[http://www.]

本文地址：http://www./wordpress/?p=3794

（本篇完）

如果您覺得本文的內(nèi)容對(duì)您的學(xué)習(xí)有所幫助：

標(biāo)簽： margin:auto, margin負(fù)值, translate, 垂直居中, 彈框, 絕對(duì)定位

這篇文章發(fā)布于 2013年11月19日，星期二，19:29，歸類于 css相關(guān)。                        閱讀 7170 次, 今日 35 次