CSS篇之3. 如何保持浮層水平垂直居中
垂直水平居中是日常前端開發當中一個常見的需求,在支援 CSS3 屬性的現代瀏覽器當中,有一個利用 CSS3 屬性的垂直水平居中方法:
.center {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50 %,-50%);
}
上面的例子,無論我們怎樣調整視窗的大小,紅色方塊始終會在視窗垂直、水平居中。
原理
為了解釋原理,我們建立兩個元素:
<div id="outer">
<div id="inner">
</div>
</div>
先不加上 transform 屬性:
#outer {
position: relative;
width: 500px;
height: 500px;
border: 2px solid yellow ;
}
#inner {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: red;
}
可以看到紅色方塊左、上方距離外層方塊的距離都是250個畫素,如果我們想實現垂直水平居中,就應該將紅色方塊的中心點移動到目前元素左上角的位置,也就是分別向上和向左移動一半方塊邊長的長度,50個畫素。
#inner {
position: absolute ;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: red;
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
水平垂直居中實現程式碼
.parent {
width: 200px;
height: 200px;
background-color: black;
}
.child {
position: relative;
height: 100px;
width: 100px;
top: 50%;
left: 50%;
background-color:red;
-webkit-transform: translate(-50%, -50%) ;
-moz-transform: translate(-50%, -50%) ;
-ms-transform: translate(-50%, -50%) ;
-o-transform: translate(-50%, -50%) ;
transform: translate(-50%, -50%) ;
}
以往,彈出層水平垂直居中我們往往用js實現,現在可以用css3來完成了。而且用這種方法彈出層不需要設定高度,很方便。
相關推薦
CSS篇之3. 如何保持浮層水平垂直居中
垂直水平居中是日常前端開發當中一個常見的需求,在支援 CSS3 屬性的現代瀏覽器當中,有一個利用 CSS3 屬性的垂直水平居中方法: .center { position: absolute; top: 50%;
CSS篇之2---如何保持浮層水平垂直居中
img 才會 寬高 true 類型 webkit block clas lock 如何保持浮層水平垂直居中.notehttp://www.cnblogs.com/yaliu/p/5190957.html (一)利用絕對定位與transform
CSS3清除浮動 保持浮層水平垂直居中
1)清除浮動,什麼時候需要清除浮動,清除浮動都有哪些方法 1、在非IE瀏覽器(如Firefox)下,當容器的高度為auto,且容器的內容中有浮動(float為left或right)的元素,在這種情況下,容器的高度不能自動伸長以適應內容的高度,使得內容溢位到容器外面而
讓浮層水平垂直居中的方法
(一)利用絕對定位與transform <div class="parent"> <div class="children"></div> </div> 將父元素定位,子元素
20181127——CSS保持浮層水平居中
元素水平居中 正常的margin後面是跟padding一樣的,跟著4個引數,margin: 0 auto;0為上下外間距為0px auto代表左右自動適應。 居中不好使的原因: 1、元素沒有設定寬度,沒有寬度怎麼居中嘛! 2、設定了寬度依然不好使,你設定的是行內元素吧,行內元素和塊元素的區別
CSS篇之3---position 和 display 的取值和各自的意思和用法
details AI class spl gpo play sdn position body http://blog.csdn.net/zengyonglan/article/details/53337843 http://blog.csdn.net/splendid_c
CSS元素(文字、圖片)水平垂直居中方法
1、text-align:center; 2、margin:0 auto; 3、display:inline-block; + text-align:center; 4、position:relative; + float:left; 5、line-height 6、上下左右padd
CSS未知寬高的元素,水平垂直居中
方法一:使用定位 思路:子元素絕對定位,距離頂部 50%,左邊50%,然後使用css3 transform:translate(-50%; -50%) 優點:高大上,可以在webkit核心的瀏覽器中使用 缺點:不支援IE9以下不支援transform屬性 <style> .par
CSS佈局篇之水平垂直居中
定寬高 + 絕對定位 + 0 + auto邊距 這種方法需要知道元素的寬高,但是相容性絕佳。 position: absolute; top: 0; left: 0; bottom: 0; ri
HTML篇之CSS樣式——CSS水平垂直居中對齊(多種方式)
用CSS來實現元素的垂直居中效果是件苦差事,雖然說實現方法有多種,但有很多方式在某些瀏覽器下可能無法正常的工作。接下來我們就一起來看看這些不同方法實現垂直居中的各自優點和其不足之處。 方法一:這種方法用來實現單行垂直居中是相當的簡單的,你只要保證元素內容是單行,並且其高度是
Python+Selenium基礎篇之3-開啟和關閉IE/Chrome瀏覽器
前面文章介紹了,如何呼叫webdriver介面方法來開啟和關閉Firefox瀏覽器,本文介紹如何開啟IE和Chrome瀏覽器。web專案,需要做相容性測試,最重要的是瀏覽器相容性測試。如果只考慮windows平臺,相信應該很多公司必須要測試IE、Firefox、Chrome這三大瀏覽器。所以webui 自動化
Python+Selenium練習篇之3-利用tag name定位元素
前一篇文章介紹瞭如何通過元素的id值來定位web元素,本文介紹如何通過tag name來定位元素。個人認為,通過tag name來定位還是有很大缺陷,定位不夠精確。主要是tag name有很多重複的,造成了選擇tag name來定位頁面元素不準確,所以使用這個方法定位web元素的機會很少。 &n
CSS之水平垂直居中
三種方法實現DIV水平垂直居中 絕對定位 + margin 負值 /* html */ <div id="box"></div> /* css */ #box{ height:200px; width:400px;
CSS篇之2. 清除浮動,什麼時候需要清除浮動,清除浮動都有哪些方法
2. 清除浮動,什麼時候需要清除浮動,清除浮動都有哪些方法 ? 一.什麼時候需要清除浮動? 我們對元素進行了浮動(float)時,我們的元素就會脫離文件流,像一隻小船一樣漂流在文件之上。 在 CSS 中,任何元素都可以浮動。浮動元素會生成一個塊級框,而
CSS篇之1. CSS 盒子模型,絕對定位和相對定位
1. CSS 盒子模型,絕對定位和相對定位 解答: (1)css盒子模型: CSS中,盒子模型也叫框模型,它規定了元素框處理元素內容、內邊距、邊框 和 外邊距 的方式。在HTML文件中,每個元素都有盒子模型。 內邊距、邊框和外邊距可以應用於一個
Python+Selenium中級篇之3-二次封裝Selenium中幾個方法
本文來介紹,如何把常用的幾個webdriver的方法封裝到自己寫的一個類中去,這個封裝過程叫二次封裝Selenium方法。我們把開啟站點,瀏覽器前進和後退,關閉和退出瀏覽器這這個方法封裝
Python+Selenium練習篇之3-瀏覽器滾動條操作
ps:scroll函式用法--scrollHeight 獲取物件的滾動高度。--scrollLeft 設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離。--scrollTop 設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離。--scrollWidth 獲取物件的滾動寬度方法二:fro
🔥《手把手教你》系列基礎篇之3-python+ selenium-驅動瀏覽器和元素定位大法(詳細)
1. 簡介 上一篇中,只是簡單地一帶而過的說了一些驅動瀏覽器,這一篇繼續說說驅動瀏覽器,然後再說一說元素定位的方法。 完成環境的安裝並測試之後,我們對Selenium有了一定的瞭解了,接下來我們繼續驅動瀏覽器做一些基本操作: 視窗尺寸設定、網頁截圖、重新整理、前進和後退 2. 視窗尺寸設定 在測試過程中,我們
🔥《手把手教你》系列基礎篇之3-python+ selenium自動化測試-驅動瀏覽器和元素定位大法(詳細)
1. 簡介 上一篇中,只是簡單地一帶而過的說了一些驅動瀏覽器,這一篇繼續說說驅動瀏覽器,然後再說一說元素定位的方法。 完成環境的安裝並測試之後,我們對Selenium有了一定的瞭解了,接下來我們繼續驅動瀏覽器做一些基本操作: 視窗尺寸設定、網頁截圖、重新整理、前進和後退 2. 視窗尺寸設定 在測試過程中,我們
《手把手教你》系列練習篇之3-python+ selenium自動化測試(詳細教程)
1. 簡介 前面介紹了,XPath, id , class , link text, partial link text, tag name, name 七大元素定位方法,本文介紹webdriver支援的最後一個方法:by_css。css和XPath類似,也需要掌握一些語法,才能寫出正確的,完