您現在的位置是:電腦技術吧?>? 故障問題 ??>??html元素居中,css元素居中的方式??>??正文詳情

html元素居中,css元素居中的方式

盧亦玉2019-11-19 12:11:20 人圍觀
簡介html怎么讓div居中HTML元素在其父元素上水平居中的方法:方法1:代碼如下:div class=wrap divclass=left-right-middle1 left andhtml中左右居中

html元素 水平居中 于 其父級元素的方法: 方法1:代碼如下:div class=wrap div class=left-right-middle1左右居中方法1/div /div 代碼如下:html,body,div{ margin:0; padding:0; height:100%; position:relative; } .wrap{ width:400px; height:300px; margin:10px; border:1px solid #000; } .left-right-middle1{ width:200px; background-color:#69F; margin:0 auto; } 方法2:代碼如下:div class=wrap div class=left-right-middle2左右居中方法2/div /div 代碼如下:html,body,div{ margin:0; padding:0; height:100%; position:relative; } .wrap{ width:400px; height:300px; margin:10px; border:1px solid #000; } .left-right-middle2{ width:200px; background-color:#69F; left:50%; margin-left:-100px; } html元素 垂直居中 于 其父級元素的方法: 代碼如下:div class=wrap div class=top-bottom-middle上下居中/div /div 代碼如下:html,body,div{ margin:0; padding:0; height:100%; position:relative; } .wrap{ width:400px; height:300px; margin:10px; border:1px solid #000; } .top-bottom-middle{ height:200px; background-color:#69F; top:50%; margin-top:-100px; } html元素 水平垂直居中 于 其父級元素的方法: 方法1:代碼如下:div class=wrap div class=all-middle1上下左右居中方法1/div /div 代碼如下:html,body,div{ margin:0; padding:0; height:100%; position:relative; } .wrap{ width:400px; height:300px; margin:10px; border:1px solid #000; } .all-middle1{ width:200px; height:200px; background-color:#69F; top:50%; margin:-100px auto 0; } 方法2: 代碼如下:div class=wrap div class=all-middle2上下左右居中方法2/div /div 代碼如下:html,body,div{ margin:0; padding:0; height:100%; position:relative; } .wrap{ width:400px; height:300px; margin:10px; border:1px solid #000; } .all-middle2{ width:200px; height:200px; background-color:#69F; top:50%; left:50%; margin:-100px 0 0 -100px; } 完整代碼: 代碼如下:!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=http://www.w3.org/1999/xhtml head meta http-equiv=Content-Type content=text/html charset=utf-8 / titleDiv Middle/title style type=text/css html,body,div{ margin:0; padding:0; height:100%; position:relative; } .wrap{ width:400px; height:300px; margin:10px; border:1px solid #000; } .left-right-middle1{ width:200px; background-color:#69F; margin:0 auto; } .left-right-middle2{ width:200px; background-color:#69F; left:50%; margin-left:-100px; } .top-bottom-middle{ height:200px; background-color:#69F; top:50%; margin-top:-100px; } .all-middle1{ width:200px; height:200px; background-color:#69F; top:50%; margin:-100px auto 0; } .all-middle2{ width:200px; height:200px; background-color:#69F; top:50%; left:50%; margin:-100px 0 0 -100px; } /style /head body div class=wrap div class=left-right-middle1左右居中方法1/div /div div class=wrap div class=left-right-middle2左右居中方法2/div /div div class=wrap div class=top-bottom-middle上下居中/div /div div class=wrap div class=all-middle1上下左右居中方法1/div /div div class=wrap div class=all-middle2上下左右居中方法2/div /div /body /html 效果圖:

版權聲明:本文由 盧亦玉 整理編輯。

原標題:css元素橫向居中,div元素居中

轉載注明出處:http://www.dn9ww09s.icu/fault/13622.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 潮自拍背景虛化在哪調,潮自拍背景虛化怎么設置

    潮自拍背景虛化在哪調,潮自拍背景虛化怎么設置 相關圖片輕顏相機怎么把背景虛化潮人自拍作為一種強大的拍照工具,自然受到所有時尚男女的喜愛。但是你知道如何虛擬化背景嗎?如何調節亮度?現在,超人軟件編輯想給大家介紹一下,關...

  • 微信為什么沒有搖一搖功能,微信搖一搖功能

    微信為什么沒有搖一搖功能,微信搖一搖功能 相關圖片怎么關閉微信搖一搖功能在介紹移動網站shake功能代碼之前,HTML5的deviceorientation做了兩個聲明:下面的代碼可以直接運行,當然不要忘記引用jQuery。代碼如下有沒有搖一搖...

  • 蘋果8按鍵壞了怎么截圖,蘋果home鍵壞了如何截圖

    蘋果8按鍵壞了怎么截圖,蘋果home鍵壞了如何截圖 相關圖片iphone沒home怎么截屏與使用電源和音量鍵的Android屏幕截圖不同,iPhone的屏幕截圖使用電源和主控鍵。盡管iPhone的質量控制在移動行業被認為是非常出色的,但仍有用戶偶爾會蘋果手機不按...

  • 炫酷文字圖片,文字背景

    炫酷文字圖片,文字背景 相關圖片霸氣文字控在網頁設計中,如果處理好網站主頁的顏色,可以使整個網站變得更好。巧妙地運用一些交互效果,不僅可以使網頁瞬間變得明亮,而且在提高用戶感知和感官體驗方面發揮...

  • 蘋果日記本軟件哪個好,蘋果手機日記本軟件哪個好

    蘋果日記本軟件哪個好,蘋果手機日記本軟件哪個好 相關圖片日記本哪個軟件好用很多人仍然保持著記日記的習慣,但使用物理記事本不僅不方便,而且不安全。現在,除了空間和博客,你還有另一個選擇,在你的日記中留下你寶貴的記憶。小編...

  • 魯D,摩拜單車

    魯D,摩拜單車 相關圖片摩拜單車怎么用今天,想必各位小伙伴都可以感受到生活中濃郁的萬圣節氣息了吧!摩拜單車官方就為各位推出了拯救僵尸車活動。那么摩拜拯救僵尸車怎么玩呢?下面,超人軟件小編就為...

  • 底片有什么用,底片

    底片有什么用,底片 相關圖片底片什么意思效果如下:  在AS3中顯示對象都有一個transform屬性,設置這個屬性可以改變顯示對象的大小,旋轉,顏色等特性.transform屬性還有它自已的屬性,其底片效果...

  • 貓眼電影卡怎么查余額,貓眼電影卡

    貓眼電影卡怎么查余額,貓眼電影卡 相關圖片貓眼電影折扣卡劃算嗎如今,許多年輕人在購買電影票時選擇使用貓眼電影。你知道怎么檢查貓眼電影的平衡嗎?現在,超人軟件編輯想為您介紹如何為貓眼電影充電。讓我們看看如何...

  • 公共空間設計優秀案例,優秀景觀設計案例分析

    公共空間設計優秀案例,優秀景觀設計案例分析 相關圖片展廳設計案例分析ppt單頁應用是指用戶通過瀏覽器加載獨立的HTML頁面而不離開這個導航頁面,這也是它的獨特優勢。對于用戶操作,單頁應用程序一旦加載并執行,通常會有更多的響應...

  • 全民K歌如何發起合唱,全民K歌怎么和好友合唱

    全民K歌如何發起合唱,全民K歌怎么和好友合唱 相關圖片全民k歌怎么一起合唱最近,很多國家級卡拉OK的用戶和朋友都反映,他們在使用該軟件的過程中不知道如何唱歌。所以接下來,超人軟件編輯想為大家解答如何處理全國k歌合唱團的低分...

熱評文章

  • 淘寶時光機何時建立,淘寶時光機 何時推出

    淘寶時光機何時建立,淘寶時光機 何時推出 相關圖片淘寶店鋪時光機機jk是山嗎近日,淘寶網正式推出雙11時光機功能。我相信你們不知道淘寶雙11時光機是什么。接下來,超人軟件編輯還想介紹一下如何玩淘寶雙11時光機。請不要誤會感興...

  • 尤里克克,鋼琴基礎教程

    尤里克克,鋼琴基礎教程 相關圖片古典樂器STL作為C 標準不可或缺的一部分,應該滲透到C 程序的各個角落。STL不是實驗室里的最愛,也不是程序員桌上的顯示器。她的興奮不是曇花一現。本教程旨在傳播和中阮入門...

  • 抖音水印在線解析本地,抖音怎么設置不要水印

    抖音水印在線解析本地,抖音怎么設置不要水印 相關圖片拍抖音怎么不要水印作為一款功能強大的視頻軟件,自助餐深受很多年輕人的喜愛。最近,很多用戶和朋友都說,他們想知道如何去除嘰嘰喳喳的聲音和如何去除水。增加了“o-試驗”。...

  • 同一個企業釘釘怎么拉黑,釘釘怎么拉黑不了同事

    同一個企業釘釘怎么拉黑,釘釘怎么拉黑不了同事 相關圖片釘釘郵箱加黑名單如今,越來越多的企業開始用釘子來管理員工。我相信很多人想知道離開公司后如何設置黑名單,以及如何退出以前的公司?現在,讓我們跟隨超人軟件編輯器學習如...

  • 顏色和光澤鮮艷,色彩鮮艷光澤耀眼

    顏色和光澤鮮艷,色彩鮮艷光澤耀眼 相關圖片形容顏色光澤第一步:畫一個圓圈開始焰火-設置背景為黑色并在畫布上畫一個圓圈第二步:在圖像圓圈內添加徑向漸變。梯度法選擇徑向,顏色填充值為××000000-××ffffff。形容顏色和光...

  • 好用的手機動態桌面,手機動態桌面哪個好

    好用的手機動態桌面,手機動態桌面哪個好 相關圖片手機比較好用的動態壁紙軟件我已經習慣了一成不變的移動桌面,即使是各種各樣的壁紙也不能讓你覺得手機有一些新的創意和美感,所以現在是時候需要一個移動動態桌面來讓你的移...

  • 芝麻信用能干什么,芝麻信用能做什么

    芝麻信用能干什么,芝麻信用能做什么 相關圖片芝麻信用658能干什么大多數用戶的芝麻信用評分在600-700分左右,但也有一批人的芝麻信用評分已經達到750分或以上的高分。事實上,自去年校園日記風波以來,支付寶的芝麻信用評分為...

  • 炫酷的網頁,網頁炫酷效果

    炫酷的網頁,網頁炫酷效果 相關圖片登錄頁面炫酷特效代碼在過去,網站的創造性導航喜歡在大小、形式、顏色和排版上耍花招。現在,隨著時代的發展,它將增添酷炫的動感效果。例如,今天的網站群中,有很多學生在...

  • 如何開啟走路模式,開啟走路模式

    如何開啟走路模式,開啟走路模式 相關圖片導航怎么設置騎車走路模式古董已經成為許多人記錄自己動作的工具。當他們感覺不舒服的時候,他們可以將他們的運動模式改為步行模式。如何設置咕咚的行走方式?如何記錄咕咚的...

  • 實現了三個效果,實現了效果

    實現了三個效果,實現了效果 相關圖片價值實現的效果我們在頁面右側看到了很多浮動效果。第一類是QQ聯系人面板、對聯廣告等,大部分是基于JavaScript的動態效果。今天,我想在右邊分享一個浮動效果,它只需要CS將目的實...

關注微信

变脸官网查询