fenmiantu.gif

收聽音頻,戳鏈接,舊號itclan已暫停使用,歡迎關(guān)注微信itclanCoder公眾號可收聽更多音頻

前言

關(guān)于網(wǎng)頁中元素的水平垂直居中的問題,對于前端的小伙伴來說,非常常見,也很重要,同時也是令人非成暧龋苦惱的,無論是面試還是筆試都是一個常見的話題,有時候,當(dāng)別人問到如何讓一個元素不定寬高和高,讓它居中,或者有哪些水平垂直居中手段時,腦子里卻想到的也就一兩種,一團糟,非常尷尬,唏噓不已,今天,我就平時的學(xué)習(xí)和使用,稍稍做了一下總結(jié),也是對以往知識的一種回顧,跟大家分享一下使用心得,讓元素在網(wǎng)頁中水平垂直居中不在怕怕

水平居中

1. 方法1：若是行內(nèi)元素(自身不具備寬度,高度,也就是說設(shè)置寬度,高度,不起作用,由自身內(nèi)容撐大,比如a,b(加粗),strong(強調(diào)),i,span,img,input,select),給其父級元素設(shè)置text-align:center,可以實現(xiàn)行內(nèi)元素水平居中,代碼如下示例所示

html內(nèi)容結(jié)構(gòu)代碼

    <div class="spanParent">
           <span>span等行內(nèi)元素水平居中</span>
    </div>
    <div class="imgParent">
           ![](img/QrCode.jpg)
    </div>

css層疊樣式代碼

.spanParent,.imgParent{
     width:100%;
     text-align:center;   /*文本水平居中,給父級元素設(shè)定*/
     border-bottom:1px solid #ccc;
}

實現(xiàn)效果圖:

文本圖片水平居中,左邊為瀏覽器顯示,右邊為審查代碼結(jié)構(gòu).png

2. 方法2:若是塊級元素(div,p,ul,li,ol,h1-h6,dl,dt,dd,address,article,figure,audio,video,section,table,canvas,header,table,footer)獨自占一行,支持寬度和高度辆童，要想實現(xiàn)水平居中:margin:0 auto;

示例代碼如下:

html內(nèi)容結(jié)構(gòu)代碼

<div class="box"></div>

css層疊樣式代碼

.box{
        width:100px;
        height:100px;
        background:yellow;
        margin:0 auto;    /*水平居中,上下,左右*/
}

實現(xiàn)效果圖

塊級元素水平居中,左邊為瀏覽器,右邊為審查代碼結(jié)構(gòu).png

3. 方法3:若是子元素有浮動,為了讓子元素水平居中,則可以讓父元素寬度設(shè)置為fit-content,并且配合margin:0 auto,如下代碼所示：注意這個屬性值fit-content配上margin:0 auto才會讓其水平居中,目前只有chrome,firfox,Opera瀏覽器支持該屬性值,并且只能實現(xiàn)水平居中,無法實現(xiàn)垂直居中,也沒有height:fit-content,該屬性,即使設(shè)置了也不生效
   如下代碼示例所示:
   html結(jié)構(gòu)代碼

<ul class="parent">
    <li>隨筆川跡</li>
    <li>itclan</li>
    <li>個人簡介</li>
    <li>聯(lián)系地止</li>
</ul>

css層疊樣式代碼

ul,li{
    list-style:none;
}
.parent{
    width:100%;
    width:-moz-fit-content;
    width:-webkit-fit-content;
    width:fit-content;   /*父元素寬度設(shè)置fit-content,高度是沒有這樣的寫法的*/
    margin:0 auto;     /*注意只設(shè)置得了水平居中,此方法,垂直居中無法*/
}
li{
    float:left;    /*子元素設(shè)置了浮動*/
    margin:0 5px 0;
}

實現(xiàn)效果圖示例

03子元素設(shè)置了浮動如何讓其水平居中顯示.png

方法4 使用flex布局,老版本:設(shè)置父元素display:box;(聲明彈性盒模型),box-orient:horizontal;(父元素設(shè)置,用來確定子元素的方向,是橫著的還是豎著的,horizontal是橫著(水平),vertical表示豎著,垂直,),box-pack:center;(決定盒子內(nèi)部剩余空間的對齊表現(xiàn),這里是居中,均等地分割多余空間)
示例代碼如下
html結(jié)構(gòu)代碼

<div class="parent">
       <div class="son"></div>
</div>

css層疊樣式代碼

.parent{
    /*聲明彈性盒子模型*/
    display:-webkit-box;   
    /*用來確定子元素的方向,是橫著的還是豎著的,horizontal是橫著的*/
    -webkit-box-orient:horizontal; 
    /*決定盒子剩余空間的利用對齊方式,center表示居中*/
    -webkit-box-pack:center; 
    /*firefox*/
    display:-moz-box;
    -moz-box-orient:horizontal;
    -moz-box-pack:center;
    /*opera*/
    display:-o-box;
    -o-box-orient:horizontal;
    -o-box-pack:center;
    /*IE瀏覽器*/
    display:-ms-box;
    -ms-box-orient:horizontal;
    -ms-box-pack:center;
    /*標(biāo)準(zhǔn)瀏覽器*/
    display:box;
    box-orient:horizontal;
    box-pack:center;
}
.son{
    width:100px;
    height:100px;
    background:red;
}

實現(xiàn)效果圖示例:

使用老版本的彈性盒模型display:box,box-pack:center設(shè)置元素水平居中.png

方法5 使用flex,新版本:設(shè)置父元素display:flex(聲明彈性盒模型),flex-direction:row(設(shè)置主軸方向為水平方向),just-content:center(規(guī)定主軸方向富月艽空間的管理,所有子元素的居中,對應(yīng)老版本的box-pack)
示例代碼所示:
html內(nèi)容結(jié)構(gòu)代碼

<div class="parent">
       <div class="son"></div>
 </div>

css層疊樣式代碼

 .parent{
    display:-webkit-flex;      /*聲明彈性盒模型,定義彈性容器*/
    -webkit-flex-direction:row; /*row設(shè)置主軸方向為水平方向*/
    -webkit-justify-content:center; /*定義了在當(dāng)前行上,彈性項目沿主軸如何排布*/
    display:flex; 
    flex-direction:row;
    justify-content:center;  /*相當(dāng)于老版本的box-pack*/
}
.son{
    width:100px;
    height:100px;
    background:blue;
 }

實現(xiàn)效果圖示例

使用新版本盒模型Flex布局,display:flex

方法6 使用css3中新增的transform屬性,子元素設(shè)置離x軸50%
html結(jié)構(gòu)代碼

<div class="parent">
        <div class="son"></div>
</div>

css結(jié)構(gòu)內(nèi)容代碼

.parent{
    position:relative;  /*相對定位*/
}
.son{
    width:100px;
    height:100px;
    background:pink;
    position:absolute;
    left:50%;
    transform:translate(-50%,0);/*設(shè)置子元素transform:translate(-50%,0)*/
}

實現(xiàn)效果圖如下示例

translate結(jié)合絕對定位實現(xiàn)元素水平居中.png

<div class="parent">
    <div class="son"></div>
</div>

css層疊樣式結(jié)構(gòu)代碼

.parent{
    position:relative;
}
.son{
    width:100px;
    height:100px;
    position:absolute;
    left:50%;
    margin-left:-50px; /*-寬度/2*/
    background:green;
}

實例效果圖如下所示

使用絕對定位結(jié)合Margin負半值的方式實現(xiàn)元素水平居中.png

方法8 子元素使用絕對定位方式,position:absolute以及top,left:0,right:0;bottom:0,屬性值設(shè)置為0,margin:0 auto;
html內(nèi)容結(jié)構(gòu)代碼

<div class="parent">
    <div class="son"></div>
</div>

css層疊樣式代碼

.son{
    position:absolute;  /*設(shè)置絕對定位*/
    width:100px;        /*寬度固定*/
    height:100px;
    background:#abcdef;
    top:0;
    left:0;       /*設(shè)置top | left | right | bottom都等于0*/
    right:0;
    bottom:0;
    margin:0 auto;
}

實例效果圖如下所示

使用絕對定位left,top,right,bottom都等于0,margin-0-auto.png

垂直居中

方法1,若是單行文本內(nèi)容,可以設(shè)置line-height等于父元素的高度,注意這是定高的，也就是高度是固定不變的,這種方法只適用于單行文本的元素才適用,比如塊級元素里面文本,圖片
示例代碼所示
html內(nèi)容結(jié)構(gòu)代碼

<div class="parent">
     <span>文本垂直居中</span>
</div>

css層疊樣式結(jié)構(gòu)代碼

.parent{
    width:400px;
    height:100px;
    background:red;
    line-height:100px;/*line-height:屬性值==元素的高度值*/
}

實例效果演示圖

使用line-height時文本垂直居中.png

<div class="parent">
      ![](img/QrCode.jpg)
</div>

css層疊樣式代碼

.parent{
    width:500px;
    height:500px;
    border:1px solid red;
}
.parent::after, .son{        /*父級元素和子元素都設(shè)置display:inline-block*/
    display:inline-block;
    vertical-align: middle;   /*設(shè)置vertical-align:middle*/
}
.parent::after{   /*父元素添加一個偽類,并且設(shè)置高度100%*/ 
    content:"";
    height:100%;
}
img{
    border:1px solid blue;
    border-left:none;
}

效果實例圖如下所示

使用偽類及vertical-align: middle實現(xiàn)垂直居中顯示.png

<div class="parent">
     <div class="son">contentcontentcontentcontentcontentcontentcontent</div>
 </div>

css層疊樣式結(jié)構(gòu)代碼

.parent{
    display:table; /*讓元素以表格形式渲染*/
    border:1px solid red;
    background:red;
    height:200px;
}
.son{
    display:table-cell; /*讓元素以表格的單元表格形式渲染*/
    vertical-align:middle;/*使用元素的垂直對齊*/
    background:yellow;
}

實例效果如下圖所示

使用display-table表格的形式文本實現(xiàn)垂直居中.png

html內(nèi)容結(jié)構(gòu)代碼如下所示

<div class="parent">
        <div class="subCase">    <!---給子元素外層套一層div-->
            <div class="son">content</div>
        </div>
</div>

css層疊樣式代碼如下所示

.parent {
    height: 200px;/*高度值不能少*/
    width: 200px;/*寬度值不能少*/
    display: table;
    position: relative;
    float:left;
    background:red;
}       
.subCase {
    display: table-cell;    /*讓元素以表格的形式進行渲染*/
    vertical-align: middle;         
    padding: 10px;
    *position: absolute;
    *top: 50%;
    *left: 50%;
}
.son {
    *position:relative;
    *top: -50%;
    *left: -50%;
}

實例效果顯示如下

解決IE6-7下的display-table兼容性問題.png

<div class="parent">
        <div class="son">1</div>
</div>

css層疊樣式代碼

.parent{
    height:400px;
    display:-webkit-box;  
    -webkit-box-align:center;
    display:box;
    box-align:center;
     border:1px solid red;
}
.son{
    width:100px;
    height:100px;
    background:yellow;
}

實例效果顯示如下

display-box彈性盒模型垂直居中.png

<div class="parent">
    <div class="son">1</div>
</div>

css層疊樣式代碼

.parent{
    height:400px;
    display:-webkit-flex;  
    display:flex;
    flex-direction: row;/*容器內(nèi)項目的排列方向(默認橫向排列),row表示沿水平主軸由左向右排列,column沿垂直主軸右上到下　*/
    align-items: center;  /*居中*/
    border:1px solid red;
}
.son{
    width:100px;
    height:100px;
    background:orange;
}

實例效果如下所示

display-flex垂直居中.png

<div class="parent">
      <div class="son"></div>
</div>

css結(jié)構(gòu)代碼

.parent{
        position:relative;
        width:400px;        /*父元素設(shè)置寬度和高度*/
        height:400px;
        border:1px solid red
}
.son{
        width:100px;
        height:100px;
        position:absolute;
        top:50%;
        margin-top:-50px; /*-寬度/2*/
        background:pink;
}

實例效果如下所示

使用絕對定位margin負半值的方式進行控制.png

<div class="parent">
    <div class="son"></div>
</div>

css層疊樣式結(jié)構(gòu)代碼

.son{
    position:absolute;  /*設(shè)置絕對定位*/
    width:100px;        /*寬度固定*/
    height:100px;
    background:blue;
    top:0;
    left:0;             /*設(shè)置top | left | right | bottom都等于0*/
    right:0;
    bottom:0;
    margin:auto 0;
}

實例效果圖如下所示

使用絕對定位left,top,bottom值為0.png,margin:auto 0

 <div class="box"></div>
<div class="content">Content</div>

css層疊樣式

 html,body{height:100%;}
 .box{
        /*float:left;*/
        height:50%;  /*相對父元素的高度的50%*/
        margin-bottom:-120px;
}
.content{
        clear:both;/*清除浮動*/
        width:240px;
        height:240px;
        position:relative;/*只能用相對定位*/
        background:green;
}

實例效果如下所示

使用一個空標(biāo)簽使其元素垂直居中.png

<div class="parent">
     <div class="son">content</div>
</div>

css示例代碼如下所示

.son{
    padding:30px 0 30px 0;
    border:1px solid red;
}

實例效果如圖所示

內(nèi)填充的方式垂直居中1.png

水平+垂直居中

• 若是文本圖片,則可以使用line-height:高度溃蔫；text-align:center

示例代碼如下所示
html結(jié)構(gòu)代碼

<div class="wrap">
    文本水平垂直居中顯示
</div>

css結(jié)構(gòu)代碼

.wrap{
        width:400px;
        height:400px;
        text-align:center;  /*文本水平居中顯示*/
        line-height:400px;  /*垂直居中顯示*/
        font-size:36px;
        border:1px solid red;
}

實例效果圖如下所示

文本水平垂直居中顯示.png

• 若是定寬定高,使用絕對定位position:absolute,left:50%,top:50%,使用margin負半值進行元素的水平垂直居中顯示,代碼如下所示:
  html結(jié)構(gòu)內(nèi)容代碼

<div class="parent">
      <div class="son"></div>
</div>

css示例代碼如下所示

 .parent{
    width:100%;
    height:500px;
    position:relative;
    background:red;
}
.son{
    width:100px;
    height:100px;
    background:pink;
    position:absolute;
    left:50%;
    top:50%;      /*top50%*/
        margin-left:-50px;/*-(元素寬度/2)*/
    margin-top:-50px; /*-(元素高度/2)*/
}

實例效果如下所示

使用絕對定位margin負半值水平垂直居中顯示.png

• 絕對定位absolute+margin:auto,同時,top:0;left:0;right:0,bottom:0這種方式使一個元素水平垂直居中也是比較常見的
  html內(nèi)容結(jié)構(gòu)代碼

<div class="parent">
    <div class="son"></div>
</div>

css層疊樣式代碼

.son{
    position:absolute;  /*設(shè)置絕對定位*/
    width:100px;        /*寬度固定*/
    height:100px;
    background:#abcdef;
    top:0;
    left:0;             /*設(shè)置top | left | right | bottom都等于0*/
    right:0;
    bottom:0;
    margin: auto;      /*水平垂直居中*/
}

實例效果圖顯示

使用決定定位,設(shè)置left-top-bottom為0結(jié)合margin-auto水平垂直居中.png

• 使用js動態(tài)計算使其元素水平垂直居中
  • 水平居中元素應(yīng)設(shè)置為絕對定位,獲取元素的位置,距離瀏覽器左邊，上邊的距離,并且進行賦值
  • left:(瀏覽器的寬度-元素的寬度)/2
  • top:(瀏覽器的高度-元素的高度)/2
    示例代碼所示

html內(nèi)容結(jié)構(gòu)代碼

<div id="box"></div>

css示例代碼

 #box{
    width:100px;
    height:100px;
    background:red;
    position:absolute;  /*設(shè)置絕對定位*/
}

js代碼

/*
* @desc 利用js控制一個元素的水平垂直居中顯示
* 
*/
window.onload = function(){
  var oBox=document.getElementById("box"),
      left=(document.documentElement.clientWidth-oBox.offsetWidth)/2,
      top = (document.documentElement.clientHeight)/2;
      oBox.style.left = left+"px";
      oBox.style.top = top+"px";
  //當(dāng)屏幕尺寸發(fā)生變化時
  window.onresize = function(){
     var top = (document.documentElement.clientHeight-oBox.offsetHeight)/2,
         left = (document.documentElement.clientWidth-oBox.offsetWidth)/2; 
         oBox.style.top = top+"px";
         oBox.style.left = left+"px";
  }
}

實例效果如下所示

使用原生js使元素水平垂直居中.png

• 使用jQuery實現(xiàn)元素的水平垂直居中
  • 獲取元素
  • 獲取瀏覽器可視寬度$(window).width();
  • 獲取瀏覽器可視高度$(window).height();
  • 元素距離瀏覽器左邊的距離left:($(window).width()-元素.width())/2
  • 元素距離瀏覽器上邊的距離top:($(window).height()-元素.height())/2
  • resize:當(dāng)調(diào)整瀏覽器窗口的大小時琳猫，發(fā)生 resize 事件

示例代碼

<div id="box"></div>

css層疊樣式代碼

 #box{
    width:100px;
    height:100px;
    background:blue;
    position:absolute;
}

js代碼

/*
*  @dec 利用jQuery實現(xiàn)元素水平垂直居中
*  @function getStyle 水平垂直居中元素
*  @event resize
*/
$(function(){
 getStyle();
 function getStyle(){
   var oBox = $("#box"),
       oW = $(window).width(),   //獲取瀏覽器的可視寬度
       oH  = $(window).height(), //獲取瀏覽器的可視高度
       l = (oW-oBox.width())/2,  // 元素距離瀏覽器左邊的距離
       t = (oH-oBox.height())/2; //元素距離瀏覽器右邊的距離
       oBox.css({                    //賦值操作,left,top值
           left:l,
           top:t
        });
 }
//當(dāng)調(diào)整瀏覽器窗口的大小時,發(fā)生 resize 事件
    $(window).resize(function(){
        getStyle();
    })
})

實例效果如下所示

使用jquery使元素水平垂直居中.png

兩種常見布局:圣杯布局與雙飛翼布局

• 圣杯布局(左中右結(jié)構(gòu),兩邊寬度固定,中間自適應(yīng))
  • 左邊與右邊,使用絕對定位,左邊left:0,top:0,右邊right:0,top:0,中間使用margin
  • 兩欄布局,左邊側(cè)邊欄固定,右邊主體自使用,左邊主體自適應(yīng),右邊側(cè)邊欄固定,左側(cè)邊欄固定伟叛，右主體自適應(yīng),左主體自適應(yīng),右側(cè)邊欄固定都是圣杯布局，解決辦法:使用絕對定位,如上,還有就是浮動布局,彈性盒模型也可以解決

示例代碼如下:
使用絕對定位實現(xiàn)圣杯布局
html結(jié)構(gòu)代碼

<div class="left">左邊</div>
<div class="center">中間</div>
<div class="right">右邊</div>

css示例代碼

 .left{
    width:200px;        /*兩邊固定寬度,中間自適應(yīng)*/
    height:600px;       /*高度可以不可,由內(nèi)容填充*/
    position:absolute;
    left:0;
    top:0;
    background:red;
}
.center{
    width:100%;        /*寬度不固定*/
    background:orange;
    height:600px; 
    margin:0 200px;
}
.right{
   width:200px;       /*兩邊固定寬度,中間自適應(yīng)*/
   height:600px;      /*高度可以不可,由內(nèi)容填充*/
   position:absolute;
   right:0;
   top:0;
   background:green;
}

實例效果圖所下所示

絕對定位實現(xiàn)圣杯布局.gif

<div class="left w200">左邊</div>
<div class="right w200">右邊</div>
<div class="center">中間</div>

css層疊樣式代碼

 .w200{
    width:200px;
    height:600px;
}
.left{
    float:left;
    background:pink;
}
.right{
    float:right;
    background:blue;
}
.center{
    height:600px;
    background:red;
    overflow:hidden;  /*清除浮動*/
}

實現(xiàn)效果如下所示

浮動實現(xiàn)圣杯布局.gif

• 當(dāng)你縮放到最小值時,中間的內(nèi)容會被隱藏,你可以給中間的盒子設(shè)置一個最小寬度值即可
  html結(jié)構(gòu)內(nèi)容代碼

<div class="parent">
   <div class="left w200">左邊</div>
   <div class="center">中間</div>
   <div class="right w200">右邊</div>
</div>

css層疊樣式代碼

.parent{
    width:100%;
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    /*決定盒子剩余空間的利用對齊方式,center表示居中*/
    -webkit-box-pack:center; 
    /*firefox*/
    display:-moz-box;
    -moz-box-orient:horizontal;
    -moz-box-pack:center;
    /*opera*/
    display:-o-box;
    -o-box-orient:horizontal;
    -o-box-pack:center;
    /*IE瀏覽器*/
    display:-ms-box;
    -ms-box-orient:horizontal;
    -ms-box-pack:center;
    /*標(biāo)準(zhǔn)瀏覽器*/
    display:box;
    box-orient:horizontal;
    box-pack:center;
}
.w200{
    width:200px;
    height:600px;
}
.left{
   background:#abcdef;
}
.right{
   background:yellow;
}
.center{
    width:100%;
    background:orange;
    -webkit-box-flex:1;  /*注意的是瀏覽器前綴一定要加*/
    -moz-box-flex:1;
    -ms-box-flex:1;
    -o-box-flex:1;
    box-flex:1;
}

實現(xiàn)效果圖如下所示

使用彈性盒模型display-box實現(xiàn)圣杯布局.gif

 <div class="parent">
        <div class="left w200">左邊</div>
        <div class="center">中間</div>
        <div class="right w200">右邊</div>
</div>

css層疊樣式代碼

.parent{
    width:100%;
    display:-webkit-flex;/*聲明彈性盒模型,定義彈性容器*/
    -webkit-flex-direction:row; /*row設(shè)置主軸方向為水平方向*/
   /*決定盒子剩余空間的利用對齊方式,center表示居中*/
   -webkit-justify-content:center; /*定義了在當(dāng)前行上,彈性項目沿主軸如何排布*/
   display:flex; 
   flex-direction:row;
   justify-content:center;  /*相當(dāng)于老版本的flex-pack*/
   /*firefox*/
   display:-moz-flex;
   -moz-direction:row; 
   -moz-justify-content:center;
   /*opera*/
   display:-o-flex;
   -o-direction:row;
   -o-justify-content:center;
   /*IE瀏覽器*/
   display:-ms-flex;
   -ms-direction:row; 
   -ms-justify-content:center;
   /*標(biāo)準(zhǔn)瀏覽器*/
   display:flex;
   flex-direction:row;
   justify-content:center;
}
.w200{
    width:200px;
    height:600px;
 }
.left{
    background:red;
}
.right{
    background:green;
}
.center{
    width:100%;
    background:pink;
    -webkit-flex-flex:1;  /*注意的是瀏覽器前綴一定要加*/
    -moz-flex-flex:1;
    -ms-flex-flex:1;
    -o-flex-flex:1;
    flex-flex:1;
}

實例效果圖如下所示

使用display-flex實現(xiàn)圣杯布局.gif

京東搜索導(dǎo)航欄.gif

淘寶搜索導(dǎo)航欄.gif

• 雙飛翼布局(等高布局)
• 一個盒子的內(nèi)容變化,同樣會影響同級(兄弟)高度變換,實時同步變化
  示例代碼如下所示
  html內(nèi)容結(jié)構(gòu)代碼

<div class="wrap">
    <div class="left">等高布局等高布局等高布局等高布局等高布局</div>
    <div class="right">等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局</div>
</div>

css層疊樣式代碼

.wrap{
    width:1000px;
    margin:0 auto;
    overflow:hidden;
    border:1px solid red
}
.left{
    width:300px;
    background:red;
    float:left;             /*左浮動*/
    padding-bottom:1000px;
    margin-bottom:-10000px;
}
.right{
    width:700px;
    background:blue;
    float:right;             /*右浮動*/
    padding-bottom:1000px;
    margin-bottom:-1000px;
}

實例效果如下所示

等高布局.gif

總結(jié)

本篇主要是圍繞著一個元素在頁面中如何水平垂直居中,分別對行內(nèi)元素和塊級元素介紹了8種方式元素的水平居中和9種垂直方式元素居中,進而又對一個元素用5種方式實現(xiàn)水平+垂直居中顯示,最終常見兩種布局,圣杯布局(使用絕對定位,浮動布局,彈性盒模性Flex布局可實現(xiàn))和雙飛翼(等高)布局,其中絕對定位與浮動布局都會破壞元素的文檔流,對于一個元素讓其水平垂直居中顯示很常見,比如說彈框,還有頁面上布局,對于塊級元素我們往往第一想到的是margin:0 auto,水平居中顯示,但是有時卻難以想到其他種方法,對于使用絕對定位方式,設(shè)置left,top,right,bottom為0,配合margin的使用實現(xiàn)水平垂直居中還是挺巧妙的,同時絕對定位,對于固定寬度高度,用margin負半值的方法實現(xiàn)水平垂直居中顯示也是一種很好的方式,還有display:table的方式實現(xiàn)垂直居中顯示,以及transform結(jié)合絕對定位實現(xiàn)元素水平居中顯示,最為強大的是彈性盒模型Flex布局,無論是老版本display:box,還是新版本display:flex對父元素設(shè)置該屬性,同時設(shè)置子元素的排列方式,也可以對子元素進行box-flex進行設(shè)置,能夠很好的達到水平垂直居中顯示,自適應(yīng),但是注意該屬性的兼容性,針對不同的瀏覽器,要加上瀏覽器的前綴,否則會失效,對于元素水平垂直居中顯示可以優(yōu)先考慮css的方式解決(如上方法),對于復(fù)雜的實例,也可以考慮同上文中用js的方式去實現(xiàn)元素的水平垂直居中顯示

以下是本篇提點概要

• 水平居中

  • 方法1：若是行內(nèi)元素,給其父級元素設(shè)置text-align:center,可以實現(xiàn)行內(nèi)元素水平居中
  • 方法2:若是塊級元素,要想實現(xiàn)水平居中:margin:0 auto;
  • 方法3:若是子元素有浮動,為了讓子元素水平居中,則可以讓父元素寬度設(shè)置為fit-content,并且配合margin:0 auto,注意這個屬性值fit-content配上margin:0 auto才會讓其水平居中,目前只有chrome,firfox,Opera瀏覽器支持該屬性值,并且只能實現(xiàn)水平居中,無法實現(xiàn)垂直居中,也沒有height:fit-content,該屬性,即使設(shè)置了也不生效
  • 方法4 使用flex布局,老版本:設(shè)置父元素display:box;,box-orient:horizontal;,box-pack:center;實現(xiàn)元素水平居中
  • . 方法5 使用flex,新版本:設(shè)置父元素display:flex),flex-direction:row(設(shè)置主軸方向為水平方向),just-content:center(規(guī)定主軸方向富酝彻危空間的管理,所有子元素的居中,對應(yīng)老版本的box-pack)
  • 方法6 使用css3中新增的transform屬性,子元素設(shè)置離x軸50%
  • 方法7 元素使用絕對定位方式,left:50%,以及margin的負半值方式,margin-left:-寬度的一半
  • 方法8 子元素使用絕對定位方式,position:absolute以及top,left:0,right:0;bottom:0,屬性值設(shè)置為0,margin:0 auto;

• 垂直居中

  • 方法1,若是單行文本內(nèi)容,可以設(shè)置line-height等于父元素的高度,注意這是定高的，也就是高度是固定不變的,這種方法只適用于單行文本的元素才適用,比如塊級元素里面文本,圖片
  • 方法2账千，若是行內(nèi)塊級元素侥蒙，也就是給它設(shè)置了display:inline-block屬性,這種方法針對一些img等行內(nèi)元素,比較常用,vertical-align:middle和一個偽元素內(nèi)容塊處于容器的中央,注意要給這個偽類高度設(shè)置高度100%，此方法在IE6下失效,IE,7,8,9有用,但是又在IE10,11又失效(IEText測的)
  • 方法3,子元素可用vertical-align:middle(使元素垂直對齊),和display:tab-cell(讓元素以表格形式渲染),父元素使用display:table,讓元素以表格的形式渲染
  • 方法4,使用Flex布局,display:box(聲明彈性盒模型),box-orient:vertical;(父元素設(shè)置,用來確定子元素的方向,垂直方向向的,豎著的,horizontal是橫著的),box-pack:center;
  • 方法5,使用Flex布局,display:flex(聲明彈性盒模型),align-items:center(元素在側(cè)軸中間位置,富匀锞簦空間在側(cè)軸兩側(cè))flex-direction:coluumn(設(shè)置主軸方向為垂直方向)
  • 方法6,設(shè)置父元素相對定位(position:relative),子元素設(shè)置絕對定位position:absolute,top:50%,height高度固定,利用margin負半值的方式辉哥，讓元素垂直居中
  • 方法7,設(shè)置父元素相對定位(position:relative),子元素設(shè)置絕對定位,margin:auto 0,高度固定,left | top | right | bottom都設(shè)置為0，但是在IE8低版本瀏覽器以下失效
  • 方法8,需要在居中元素前面放一個空塊級元素(比如div)即可,然后設(shè)置這個div的高度為50%,margin-bottom為元素高度的一半,而且居中元素需要清除浮動,需要注意的是,使用這種方法,`如果你的居中元素是放在body中的話,需要給html,body設(shè)置一個height:100%的屬性
  • 方法9:使用內(nèi)邊距的方式使其垂直居中

• 水平+垂直居中

  • 若是文本圖片,則可以使用line-height:高度；text-align:center
  • 若是定寬定高,使用絕對定位position:absolute,left:50%,top:50%,使用margin負半值進行元素的水平垂直居中顯示
  • 絕對定位absolute+margin:auto,同時,top:0;left:0;right:0,bottom:0這種方式使一個元素水平垂直居中也是比較常見的
  • 使用js動態(tài)計算使其元素水平垂直居中
  • 使用jQuery實現(xiàn)元素的水平垂直居中

• 兩種常見布局:圣杯布局(兩邊寬度固定,中間自適應(yīng))與雙飛翼(等高)布局

  • 圣杯(兩邊寬度固定,中間自適應(yīng))布局
    • 使用絕對定位實現(xiàn)圣杯布局
    • 使用浮動實現(xiàn)圣杯布局
    • 使用彈性盒模型Flex布局display-box實現(xiàn)圣杯布局
    • 利用彈性盒模型新版本display:flex實現(xiàn)圣杯布局

• 雙飛翼(等高)布局

  • 一個盒子的內(nèi)容變化,同樣會影響同級(兄弟)高度變換,實時同步變化,如上代碼示例所示

更多內(nèi)容盡在微信itclanCoder公眾號.jpg