|
導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而,超級文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而,超級文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言,是因?yàn)槲谋局邪怂^“超級鏈接”點(diǎn)。 在網(wǎng)頁進(jìn)行css布局時居中是經(jīng)常需要用到的,其中就有css絕對定位居中,那么,css絕對定位如何實(shí)現(xiàn)居中?今天的這篇文章將給大家來介紹關(guān)于css絕對定位居中的實(shí)現(xiàn)方法。css絕對定位居中的實(shí)現(xiàn)方法有很多,下面將給大家介紹css絕對定位居中的四種方法。 1、兼容性不錯的主流css絕對定位居中的用法: .conter{
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 寬度的一半 */
}注意:這種方法有一個很明顯的不足,就是需要提前知道元素的尺寸。否則margin負(fù)值的調(diào)整無法精確。此時,往往要借助JS獲得。 2、css3的出現(xiàn),使得有了更好的解決方法,就是使用transform代替margin. transform中translate偏移的百分比值是相對于自身大小的,可以這樣實(shí)現(xiàn)css絕對定位居中: .conter{
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%); /* 50%為自身尺寸的一半 */
}3、margin:auto實(shí)現(xiàn)絕對定位元素的居中(上下左右均0位置定位;margin: auto) .conter{
width: 600px; height: 400px;
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto; /* 有了這個就自動居中了 */
}4、使用css3盒模型:flex布局實(shí)現(xiàn)css絕對定位居中。這種情況是在不考慮低版本瀏覽器的情況下可以使用。 本篇文章到這里就結(jié)束了,關(guān)于定位的更多內(nèi)容可以參考css手冊。 相關(guān)推薦: 盤點(diǎn)8種CSS實(shí)現(xiàn)垂直居中水平居中的絕對定位居中技術(shù)_html/css_WEB-ITnose css絕對定位居中技術(shù)優(yōu)缺點(diǎn)圖表詳解 以上就是css絕對定位如何居中?css絕對定位居中的四種實(shí)現(xiàn)方法的詳細(xì)內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章! 網(wǎng)站建設(shè)是一個廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!