91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何使用CSS實現定位元素居中

發布時間:2022-01-20 14:56:36 來源:億速云 閱讀:146 作者:清風 欄目:web開發

本文將為大家詳細介紹“如何使用CSS實現定位元素居中”,內容步驟清晰詳細,細節處理妥當,而小編每天都會更新不同的知識點,希望這篇“如何使用CSS實現定位元素居中”能夠給你意想不到的收獲,請大家跟著小編的思路慢慢深入,具體內容如下,一起去收獲新知識吧。

絕對定位元素的居中實現

如果要問如何CSS實現絕對定位元素的居中效果,很多人心里已經有答案了。

兼容性不錯的主流用法是:

  1. .element {   

  2.     width600pxheight400px;   

  3.     positionabsoluteleft: 50%; top: 50%;   

  4.     margin-top: -200px;    /* 高度的一半 */  

  5.     margin-left: -300px;    /* 寬度的一半 */  

  6. }  

但,這種方法有一個很明顯的不足,就是需要提前知道元素的尺寸。否則margin負值的調整無法精確。此時,往往要借助JS獲得。

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

  1. .element {   

  2.     width600pxheight400px;   

  3.     positionabsoluteleft: 50%; top: 50%;   

  4.     transform: translate(-50%, -50%);    /* 50%為自身尺寸的一半 */  

  5. }  

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

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

實際上,絕對定位元素的居中實現還有另外一種方法,可以說是權衡了上面的尺寸自適應以及兼容性的一個方案,其實現的核心是margin:auto.


margin:auto實現絕對定位元素的居中

首先,我們來看下CSS代碼:

  1. .element {   

  2.     width600pxheight400px;   

  3.     positionabsoluteleft: 0; top: 0; rightright: 0; bottombottom: 0;   

  4.     marginauto;    /* 有了這個就自動居中了 */  

  5. }  

代碼兩個關鍵點:

    上下左右均0位置定位;
    margin: auto

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

什么是css

css是一種用來表現HTML或XML等文件樣式的計算機語言,主要是用來設計網頁的樣式,使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言,并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中,而樣式規則的優先級由css根據這個層次結構決定,從而實現級聯效果,發展至今,css不僅能裝飾網頁,也可以配合各種腳本對于網頁進行格式化。

感謝您能讀到這里,小編希望您對“如何使用CSS實現定位元素居中”這一關鍵問題有了從實踐層面最深刻的體會,具體使用情況還需要大家自己動手實踐使用過才能領會,如果想閱讀更多相關內容的文章,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI

贡嘎县| 庄河市| 泉州市| 兴仁县| 武穴市| 益阳市| 灵石县| 海原县| 林甸县| 杂多县| 长泰县| 永登县| 萍乡市| 江陵县| 深泽县| 延吉市| 清新县| 江川县| 噶尔县| 清镇市| 昂仁县| 禄丰县| 酒泉市| 荣昌县| 会同县| 宿州市| 正阳县| 如皋市| 伊通| 福贡县| 宜城市| 邹平县| 金乡县| 垦利县| 元江| 吉首市| 辽宁省| 灵台县| 肥西县| 加查县| 阿克苏市|