HTML對(duì)于元素水平垂直居中的探討
我要評(píng)論我們?cè)谠O(shè)計(jì)頁面的時(shí)候，經(jīng)常要把DIV居中顯示，而且是相對(duì)頁面窗口水平和垂直方向居中顯示，如讓登錄窗口居中顯示。
到現(xiàn)在為止，探討了很多種方法。
HTML：
- <body>
- <div class="maxbox">
- <div class="minbox align-center"></div>
- </div>
- </body>
效果圖（下面幾種方法效果圖一樣）：
第一種： CSS絕對(duì)定位
主要利用絕對(duì)定位，再用margin調(diào)整到中間位置。
父元素：
- .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);
- }
水平垂直居中對(duì)齊：
- .align-center{
- position: absolute;
- left: 50%;
- top: 50%;
- margin-left: -100px; /*width/-2*/
- margin-top: -100px; /*height/-2*/
- }
第二種： CSS絕對(duì)定位 + Javascript/JQuery
主要利用絕對(duì)定位，再用Javascript/JQuery調(diào)整到中間位置。相比第一種方法，此方法提高了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);
- }
水平垂直居中對(duì)齊：
- .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)
- }
- );
- });
第三種： CSS3絕對(duì)定位 + 位移
使用絕對(duì)定位與CSS3的 transform: translate同樣也可以達(dá)到效果。
父元素：
- .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);
- }
水平垂直居中對(duì)齊：
- .align-center{
- position: absolute;
- top: 50%;
- left: 50%;
- -webkit-transform: translate(-50%, -50%);
- -moz-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%); /*向左向上位移*/
- }
第四種： Flexbox: [伸縮布局盒模型]
要讓元素水平垂直，對(duì)于Flexbox模型來說太容易了。
這里得改變一下HTML：
- <div class="maxbox align-center">
- <div class="minbox"></div>
- </div>
父元素：
- .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);
- }
水平垂直居中對(duì)齊：
- .align-center{
- display: flex;
- display: -webkit-flex; /*兼容問題*/
- justify-content: center;
- align-items: center;
- }
幾種方法的比較：
第一種CSS絕對(duì)定位margin調(diào)整，兼容性很好但是欠缺靈活性。如果有很多box里需要水平垂直居中，因其width，height不同而需要寫不同的 .align-center 。
第二種使用腳本語言，兼容性很好且彌補(bǔ)了第一種的缺點(diǎn)。不因width，height的改變而影響水平垂直居中的效果。
第三種使用CSS3的一些新的屬性，兼容IE10, Chrome, Firefox, 和 Opera。兼容性不太很好，不因width，height的改變而影響水平垂直居中的效果。
使用Flexbox模型，兼容Firefox、Opera 和 Chrome，IE全軍覆沒。也是不因width，height的改變而影響水平垂直居中的效果。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
利用CSS3的flexbox實(shí)現(xiàn)水平垂直居中與三列等高布局
這篇文章給大家介紹了三個(gè)小節(jié)的內(nèi)容，其中包括關(guān)于css3中flexbox需要掌握的概念、flexbox實(shí)現(xiàn)水平垂直居中對(duì)齊和三列等高自適應(yīng)頁腳區(qū)域黏附底部的布局，有需要的可以參考2016-09-12Flexbox制作CSS布局實(shí)現(xiàn)水平垂直居中的簡單實(shí)例
下面小編就為大家?guī)硪黄狥lexbox制作CSS布局實(shí)現(xiàn)水平垂直居中的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-27淺析CSS實(shí)現(xiàn)水平垂直同時(shí)居中的5種思路
下面小編就為大家?guī)硪黄獪\析CSS實(shí)現(xiàn)水平垂直同時(shí)居中的5種思路。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧2016-04-28- 下面小編就為大家?guī)硪黄孌IV水平垂直居中的兩種完美方法推薦。一起跟隨小編過來看看吧。希望給大家一個(gè)參考2016-03-15
- 這篇文章主要介紹了CSS解決頁面圖片水平垂直居中問題的方法,文中給出了三種方案而無需依賴JavaScript,需要的朋友可以參考下2016-03-10
全面總結(jié)使用CSS實(shí)現(xiàn)水平垂直居中效果的方法
這篇文章主要介紹了使用CSS實(shí)現(xiàn)水平垂直居中效果的方法的總結(jié),涵蓋了從最原始的高度設(shè)置到令人興奮的CSS3的Flexbox方式,非常全面,十分推薦!需要的朋友可以參考下2016-03-10- 這篇文章主要介紹了CSS定位“十字架”之水平垂直居中的相關(guān)資料，CSS如何定位“十字架”實(shí)現(xiàn)水平垂直居中效果，小編為大家解答，感興趣的小伙伴們可以參考一下2016-03-02
- 本文是小編日常遇到的關(guān)于html水平垂直居中的一些問題小結(jié)，特此分享在腳本之家網(wǎng)站供大家參考2015-11-18
- 這篇文章主要介紹了DIV或者DIV里面的圖片水平與垂直居中的方法,需要的朋友可以參考下2018-11-15