html的元素水平垂直居中該怎麼設置
- php中世界最好的语言原創
- 2018-01-24 10:01:444761瀏覽
這次帶給大家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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn