css3種方法實現元素的絕對居中

2022-05-04 15:24:09 字數 739 閱讀 2535

元素的絕對居中應該是很多人熟悉的乙個小應用,我記得很多年前去神州數碼面試的時候就遇到過這個面試題。方法比較簡單,**如下:

.node
這樣的用法網上很多,我那時候也是只知其然不知其所以然,margin負值是一方面,這裡要說的是left和top的百分比。

先看下w3c裡面對這個概念的介紹:

其實這裡也沒有清楚,這裡left和top的百分比,我覺得應該標尺應該是父元素,也就是分別是 left的50% 其實是父元素寬度的50%,top值為50%,也是父元素高度的50%,

並且這個值是可以實時計算的,改變瀏覽器視窗的大小時,會發現元素始終居中,就是實時計算的結果。

了解了這一點就簡單了。

畫個圖說明一下:

(吐個槽:好久不用ps 畫個這麼簡單的圖都笨的不行了)

通過postion的定位,現在子元素被定到了黃色區域,這個時候,通過margin的負值,就可以移到絕對居中的位置了

本想再畫個圖的,畫圖技能太差,這一點也比較好理解,就不畫了。

除了這種常用的居中方法外,還有一種css3的方法,也比較好理解,是當前方法的乙個改進,不需要知道元素的寬和高。

.node
這個用法主要是用到css3中的transform,這裡就不多介紹了,但是在網上,看到了還有一種方式,用的是margin:auto;我覺得比較好玩。

.node
有點神奇

CSS3的 fit content實現水平居中

當我們讓乙個模程式設計客棧塊水平居中首先程式設計客棧想到的肯定是margin 0 auto 有木有?那麼今天給大家介紹乙個fit c程式設計客棧ontent屬性,不知道有沒有同學用過,如果用過那麼你可以略過這篇文章,沒用過的同學就繼續了,我也是第一次看到這個屬性,之前不知道這個屬性更不用說使用了,原...

CSS3清除浮動3種方法

浮動這裡要好好琢磨一下,挺麻煩,但是不難。問題 如果乙個父容器,兩個子容器div,兩個子容器為了顯示,乙個左浮動,乙個右浮動,兩個子容器都脫離了文件流,造成父容器沒有元素,這種情況下該怎麼做?問題如下圖 兩種方法 1,在兩個div後再設定乙個div,並且不設定寬高 寬高為0 然後清除上面兩個div浮...

純CSS3實現垂直居中的九種方法

瀏覽時看到的資料,每個都做了測試,很好,就先收了 測試的是谷歌瀏覽器,沒有任何問題,用360,ie11,火狐,搜狗瀏覽器做測試時,第五個方法在360,搜狗,和ie11有點問題,第七個在ie11有問題,第8個在ie11,火狐有問題。保險起見,使用前四個好,出現的問題需要再解決。1 doctype ht...