2. 程式人生 > >絕對定位元素的水平垂直居中

絕對定位元素的水平垂直居中

阿新 • • 發佈：2019-01-20

二、絕對定位元素的居中實現

如果要問如何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;    /* 有了這個就自動居中了 */
}

程式碼兩個關鍵點：

  1. 上下左右均0位置定位；
  2. margin: auto

於是，就居中了。上面程式碼的width: 600px

height: 400px僅是示意，你修改為其他尺寸，或者不設定尺寸（需要是圖片這種自身包含尺寸的元素），都是居中顯示的。很有意思的~~

點選demo中間的按鈕

點選demo頁面中間的按鈕，讓原本static的框框absolute化，可以發現其是水平垂直居中的。

不知諸位新技能get否？

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

8-10月份瀏覽器的使用比例

上圖為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的填充規則和普通流體元素一模一樣：

  1. 如果一側定值，一側auto，auto為剩餘空間大小；
  2. 如果兩側均是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">