- 1PS提示：因為圖層已鎖定，無法編輯圖層的處理方法
- 2picacg蘋果版怎么找不到|picacg ios版是不是下架了介紹
- 3Adobe Illustrator CS5 序列號大全
- 4ACDsee注冊碼免費分享（含ACDsee18、ACDsee10等版本）
- 5PDF瀏覽器能看3D文件嗎？PDF瀏覽器看3D文件圖文詳細教程
- 6Potato(馬鈴薯聊天)怎么注冊不了|Potato不能注冊處理方法介紹
- 7Potato(土豆聊天)怎么換頭像|Potato app更改頭像方法介紹
- 8最新的Adobe Illustrator CS4序列號大全
- 9qq郵件是否已讀怎么看 QQ郵箱已經發出去的郵件怎么知道對方是否已經查看
- 10AMD推土機架構回顧：雖隕落卻是Zen成功的墊腳石
- 11Intel i7-9700K性能跑分曝光：同代提升約12%
- 12美國增加25％進口關稅！PC硬件要大漲價
[摘要]這次給大家帶來html的元素水平垂直居中應該怎么設置，設置html的元素水平垂直居中的注意事項有哪些，下面就是實戰案例，一起來看一下。我們在設計頁面的時候，經常要把DIV居中顯示，而且是相對頁面窗口水平和垂直方向居中顯示，如讓登錄窗口居中顯示。到現在為止，探討了很多種方法。HTML：<bod...
這次給大家帶來html的元素水平垂直居中應該怎么設置，設置html的元素水平垂直居中的注意事項有哪些，下面就是實戰案例，一起來看一下。我們在設計頁面的時候，經常要把DIV居中顯示，而且是相對頁面窗口水平和垂直方向居中顯示，如讓登錄窗口居中顯示。
到現在為止，探討了很多種方法。
HTML：
<body>
<div class="maxbox">
<div class="minbox align-center"></div>
</div>
</body>第一種： CSS絕對定位
主要利用絕對定位，再用margin調整到中間位置。
父元素：
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}子元素：
.minbox{
width: 200px;
height: 200px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}水平垂直居中對齊：
.align-center{
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px; /*width/-2*/
margin-top: -100px; /*height/-2*/
}第二種： CSS絕對定位 + Javascript/JQuery
主要利用絕對定位，再用Javascript/JQuery調整到中間位置。相比第一種方法，此方法提高了class的靈活性。
父元素：
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}子元素：
.minbox{
width: 200px;
height: 200px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}水平垂直居中對齊：
.align-center{
position: absolute;
left: 50%;
top: 50%;
}JQuery：
$(function(){
$(".align-center").css(
{
"margin-left": ($(".align-center").width()/-2),
"margin-top": ($(".align-center").height()/-2)
}
);
});幾種方法的比較：
第一種CSS絕對定位margin調整，兼容性很好但是欠缺靈活性。如果有很多box里需要水平垂直居中，因其width，height不同而需要寫不同的 .align-center 。
第二種使用腳本語言，兼容性很好且彌補了第一種的缺點。不因width，height的改變而影響水平垂直居中的效果。
第三種使用CSS3的一些新的屬性，兼容IE10, Chrome, Firefox, 和 Opera。兼容性不太很好，不因width，height的改變而影響水平垂直居中的效果。
相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
以上就是html的元素水平垂直居中應該怎么設置的詳細內容，更多請關注php中文網其它相關文章！
網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。
推薦資訊 總人氣榜
最新教程 本月人氣
- 1紅雪0.9.13dev4不圓滿越獄iOS6 GM版圖文說明教程
- 2蘋果iPhone5開箱評測視頻(黑色iPhone5)
- 3蘋果A4設備iOS6正式版不圓滿越獄圖文說明教程
- 4iPhone4 iOS6正式版不圓滿越獄圖文說明教程【圖文版】
- 5在iOS6中添加谷歌地圖詳細圖文說明教程
- 6紅雪RedSn0w不圓滿越獄iOS6正式版圖文說明教程
- 7蘋果iOS6正式版如何更新、升級
- 8蘋果iOS6系統升級圖文說明教程及遇到問題的處理方法
- 9升級蘋果iOS6系統注意事項
- 1091手機助手iPhone版使用圖文說明教程
- 11蘋果iPhone5新特征體現在什么地方里
- 12換iPhone5？如何備份與刪除iPhone所有數據圖文說明教程
- 1蘋果手機如何設置微信透明頭像
- 2華碩筆記本網卡驅動下載安裝方法說明
- 3華為mate8如何root 華為mate8 root方法
- 4iPhone5換電池多少錢？
- 5華為榮耀5x刷機失敗如何辦 華為榮耀暢玩5x刷機失敗處理方法
- 6搶先體驗iOS9 iPhone/iPad升級至iOS9 Beta圖文說明教程
- 73星s7誤觸如何辦 3星s7防誤觸設置圖文說明教程
- 8iPhone備份SHSH圖文說明教程
- 9愛奇藝最新會員號免費共享（截止2016年12月2日）
- 10華為g9價格多少錢 華為g9青春版報價
- 11價格不算厚道 9成新iPhone 5S蘋果官方折舊體驗
- 12vivo x6a與x6d哪一個好 vivo x6a與vivo x6d的區別
