HTML對于元素水平垂直居中的探討

2020-03-24 19:27:44

字體：大中小

供稿：網(wǎng)友

我們在設(shè)計頁面的時候，經(jīng)常要把DIV居中顯示，而且是相對頁面窗口水平和垂直方向居中顯示，如讓登錄窗口居中顯示。到現(xiàn)在為止，探討了很多種方法。HTML：XML/HTML Code復(fù)制內(nèi)容到剪貼板
margin:5px; box-shadow:1px1px1pxrgba(0,0,0,0.8),-1px-1px1pxrgba(0,0,0,0.8); }
height:200px; box-shadow:1px1px1pxrgba(0,0,0,0.8),-1px-1px1pxrgba(0,0,0,0.8); }
margin-left:-100px;/*width/-2*/ margin-top:-100px;/*height/-2*/ }
第二種： CSS絕對定位 + Javascript/JQuery 主要利用絕對定位，再用Javascript/JQuery調(diào)整到中間位置。相比第一種方法，此方法提高了html' target='_blank'>class的靈活性。父元素：CSS Code復(fù)制內(nèi)容到剪貼板
margin:5px; box-shadow:1px1px1pxrgba(0,0,0,0.8),-1px-1px1pxrgba(0,0,0,0.8); }
height:200px; box-shadow:1px1px1pxrgba(0,0,0,0.8),-1px-1px1pxrgba(0,0,0,0.8); }
margin-left :($( .align-center ).width()/-2), margin-top :($( .align-center ).height()/-2) } ); });
第三種： CSS3絕對定位 + 位移使用絕對定位與CSS3的 transform: translate同樣也可以達(dá)到效果。父元素：CSS Code復(fù)制內(nèi)容到剪貼板
margin:5px; box-shadow:1px1px1pxrgba(0,0,0,0.8),-1px-1px1pxrgba(0,0,0,0.8); }
height:200px; box-shadow:1px1px1pxrgba(0,0,0,0.8),-1px-1px1pxrgba(0,0,0,0.8); }
left:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%);/*向左向上位移*/ }
第四種： Flexbox: [伸縮布局盒模型] 要讓元素水平垂直，對于Flexbox模型來說太容易了。這里得改變一下HTML：XML/HTML Code復(fù)制內(nèi)容到剪貼板
margin:5px; box-shadow:1px1px1pxrgba(0,0,0,0.8),-1px-1px1pxrgba(0,0,0,0.8); }
height:200px; box-shadow:1px1px1pxrgba(0,0,0,0.8),-1px-1px1pxrgba(0,0,0,0.8); }
display:flex; display:-webkit-flex;/*兼容問題*/ justify-content:center; align-items:center; }
幾種方法的比較：第一種CSS絕對定位margin調(diào)整，兼容性很好但是欠缺靈活性。如果有很多box里需要水平垂直居中，因其width，height不同而需要寫不同的 .align-center 。
第二種使用腳本語言，兼容性很好且彌補了第一種的缺點。不因width，height的改變而影響水平垂直居中的效果。
第三種使用CSS3的一些新的屬性，兼容IE10, Chrome, Firefox, 和 Opera。兼容性不太很好，不因width，height的改變而影響水平垂直居中的效果。
使用Flexbox模型，兼容Firefox、Opera 和 Chrome，IE全軍覆沒。也是不因width，height的改變而影響水平垂直居中的效果。以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：html form標(biāo)簽name屬性怎么用？form標(biāo)簽的name屬性詳

下一篇：html5 viewport使用方法示例詳解