絕對定位元素的水平垂直居中
二、絕對定位元素的居中實現
如果要問如何CSS實現絕對定位元素的居中效果,很多人心裡已經有答案了。
相容性不錯的主流用法是:
.element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 寬度的一半 */ }
但,這種方法有一個很明顯的不足,就是需要提前知道元素的尺寸。否則margin
負值的調整無法精確。此時,往往要藉助JS獲得。
CSS3的興起,使得有了更好的解決方法,就是使用transform
margin
. transform
中translate
偏移的百分比值是相對於自身大小的,於是,我們可以:
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%); /* 50%為自身尺寸的一半 */
}
於是乎,無論絕對定位元素的尺寸是多少,其都是水平垂直居中顯示的。
然,問題很明顯,相容性不好。IE10+以及其他現代瀏覽器才支援, IE9(-ms-), IE10+以及其他現代瀏覽器才支援。中國盛行的IE8瀏覽器被忽略是有些不適宜的(手機web開發可忽略)。
實際上,絕對定位元素的居中實現還有另外一種方法,可以說是權衡了上面的尺寸自適應以及相容性的一個方案,其實現的核心是margin:auto
.
三、margin:auto實現絕對定位元素的居中
首先,我們來看下CSS程式碼:
.element {
width: 600px; height: 400px;
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto; /* 有了這個就自動居中了 */
}
程式碼兩個關鍵點:
- 上下左右均
0
位置定位; margin: auto
於是,就居中了。上面程式碼的width: 600px
height: 400px
僅是示意,你修改為其他尺寸,或者不設定尺寸(需要是圖片這種自身包含尺寸的元素),都是居中顯示的。很有意思的~~
點選demo頁面中間的按鈕,讓原本static
的框框absolute
化,可以發現其是水平垂直居中的。
不知諸位新技能get否?
對了,該方法IE8+以及其他瀏覽器都是OK的。
上圖為8~10月份,百度流量統計員給出的瀏覽器訪問資料。IE6+IE7大概14%的樣子。顯然,很快,此方法就要開始稱霸PC武林了!
三、悠悠哉哉再說點什麼
可能有人會問,為何margin: auto;
會讓絕對定位元素居中了呢?哈哈,原因是………………
.
.
.
.
我也不知道!
可能需要查詢規範尋找一些線索。但,待會兒我還有籃球比賽,恕我沒有足夠精力去深入。歡迎有相關研究的達人分享其內部機制原理,不甚感謝!
更新於2017年2月18日
今天正好有看到自己的這篇文章,我更新下原因吧!
當一個絕對定位元素,其對立定位方向屬性同時有具體定位數值的時候,流體特性就發生了,例如:
<div class="box"></div>
.box { position: absolute; left: 0; right: 0; }
如果只有left
屬性或者只有right
屬性,則由於包裹性此時.box
寬度是0
。但是,在本例中,因為left/right
同時存在,因此寬度就不是0
,而是自適應於.box
包含塊的padding box
寬度,也就是隨著包含塊padding box
的寬度變化,.box
的寬度也會跟著一起變。
具有流體特性絕對定位元素的margin:auto
的填充規則和普通流體元素一模一樣:
- 如果一側定值,一側
auto
,auto
為剩餘空間大小; - 如果兩側均是
auto
, 則平分剩餘空間;
:
例如,下面的CSS程式碼:
.father { width: 300px; height:150px; position: relative; } .son { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
此時.son
這個元素的尺寸表現為“格式化寬度和格式化高度”,和<div>
的“正常流寬度”一樣,同屬於外部尺寸,也就是尺寸自動填充父級元素的可用尺寸的,然後,此時我們給.son
設定尺寸,例如:
.son { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 200px; height: 100px; }
此時寬高被限制,原本應該填充的空間就被多餘了出來,這多餘的空間就是margin:auto
計算的空間,因此,如果這時候,我們再設定一個margin:auto
,那麼:
.son { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 200px; height: 100px; margin: auto; }
我們這個.son
元素就水平和垂直方向同時居中了。因為,auto
正好把上下左右剩餘空間全部等分了,自然就居中啦!
// zxx: 更新end—-
相關推薦
簡單總結position定位和元素水平垂直居中
position position的屬性值共有四個常用的:relative、absolute、fixed、static。 首先普及一下文件流的知識:顯示元素物件在視窗排列時所佔用的位置,自上而下,從左到右。脫離文件流會影響其他元素的位置。 relative:相對定位,不脫離文件流,在文件
css3 讓絕對定位元素水平居中的方法
一、絕對定位元素的居中實現 如果要問如何CSS實現絕對定位元素的居中效果,很多人心裡已經有答案了。 相容性不錯的主流用法是: 1 2 3 4 5 6 .element { width: 600px; height: 400px; po
元素水平垂直居中
doc div tom 水平 charset ack round ctype style <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <tit
元素水平垂直居中的幾種常用方法
round IT spl translate 彈性 lex align mar con <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
CSS元素水平垂直居中的方法
垂直 .com put ron spa blank span osi 絕對定位 1. 元素水平居中 1.1 設置父元素的屬性 text-align: center; 說明:此屬性只針對父元素的子元素為內聯元素時有效,比如:img,input,select,but
CSS未知寬高元素水平垂直居中
use ali lan 並且 css3 優點 left 顯示設置 spl 思路:顯示設置父元素為:table,子元素為:cell-table,這樣就可以使用vertical-align: center,實現水平居中優點:父元素(parent)可以動態的改變高度(table元
容器內元素水平垂直居中
<div id="wrap"> <div id="box"> </div></div> 效果圖 方法一 #wrap{ width: 300px;
未知寬高元素水平垂直居中方法
CSS未知寬高元素水平垂直居中 方法一 思路:顯示設定父元素為:table,子元素為:cell-table,這樣就可以使用vertical-align: center,實現水平居中 優點:父元素(parent)可以動態的改變高度(table元素的特性) 缺點:IE8以下不支援 <style typ
不固定寬高元素水平垂直居中
背景: 本文主要講述不用flex佈局和grid佈局時如何設定不定高寬元素的水平垂直居中,這是很多時候經常遇到的問題。 頁面結構 <div class="box"> <div class="content"><span>
元素水平垂直居中的三種方式
僅水平居中比較簡單:margin:0 auto; 或者:margin:100px auto; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g
元素水平垂直居中的方法
1.父級相對定位,子級絕對定位 .parent{ width: 500px; height: 500px; background: #f00; position: relative; } .child{ width: 300px; height:
css不定高使元素水平垂直居中
父元素高度不定,子元素水平垂直居中 html <div class="parent"> <div class="child">123456</div> <
css 實現元素水平垂直居中的幾種方法
在做網頁的時候經常會需要讓某一個元素水平垂直居中,而要實現水平垂直居中有很多種方法,不知道你們有沒遇到這種情況:方法倒是知道,甚至還知道許多種,可一到真正用到的時候,卻突然在努力地回想,這或許就是人們經常說的「腦子短路」,所以,這篇文章和大家一起來溫故而知新,梳
css_eg01_讓不知道寬高的兩個元素水平垂直居中
html結構部分: <div id="parent"> <div id="child"> </div> </div> css部
已知/未知寬高的浮動元素水平垂直居中對齊
一、已知寬高的浮動元素水平垂直居中對齊 效果: 樣式CSS: <style> .parent{ position:relative; border:2px solid #0
塊級元素水平垂直居中方法
一、加padding減height <!DOCTYPE html> <html lang="en"> <head> <meta charset="
各種元素水平垂直居中
在我們進行網站佈局的時候,總是遇到讓已知寬高元素和為止寬高元素水平垂直居中,下面就這問題我總結的幾種方法。 1.讓已知寬度和高度的元素水平垂直居中: 方法一:使用負外邊距和百分比居中 將已知寬高的元素設定為據對定位,將left和top設定為父元素的一半即5
css設定元素水平垂直居中的方法
看到標題,相信大家並不陌生。這個問題,經常會出現在面試題中。通常會要求面試者寫出幾種方法。那麼,究竟有幾種方法,每種方法的相容情況如何,相信大家很少研究過。今天,我們就一起來看看。 通常分為2種情況,已知元素的寬度或未知。 我們先說說在已知的情況下,要如何設定。 舉例說明:
css中已知寬高的子元素水平垂直居中的三種方法
元素水平垂直居中三種的方法 設定兩個盒子,關係是父與子: <body> <div id="wrap"> <div id="inner">