實現元素的水平垂直居中

水平居中

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

html內容結構代碼

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

css層疊樣式代碼

.spanParent,.imgParent{
      width: 100%;
      text-align: center;
      border-bottom: 1px solid #ccc;
}

　　

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

示例代碼如下:

html 內容結構代碼

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

css層疊樣式代碼

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

　　

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

html 結構代碼

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

css層疊樣式代碼

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

　　

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

<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;
    /*標准瀏覽器*/
    display:box;
    box-orient:horizontal;
    box-pack:center;
}
.son{
    width:100px;
    height:100px;
    background:red;
}

　　

方法5 使用flex,新版本:設置父元素 display:flex(聲明彈性盒模型), flex-direction:row(設置主軸方向為水平方向), just-content:center(規定主軸方向富裕空間的管理,所有子元素的居中,對應老版本的box-pack)
示例代碼所示:
html內容結構代碼

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

css層疊樣式代碼

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

　　

方法6 使用css3中新增的transform屬性,子元素設置離x軸50%
html結構代碼

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

css結構內容代碼

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

方法7 元素使用絕對定位方式,以及負值的margin-left,子元素設置如下
示例代碼如下所示:
html內容結構代碼

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

　　

css層疊樣式結構代碼　　

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

　　

方法8 子元素使用絕對定位方式, position:absolute以及 top, left:0, right:0; bottom:0,屬性值設置為0, margin:0 auto;
html內容結構代碼

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

　　

css層疊樣式代碼

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

　　

垂直居中

 

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

 

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

　　

css層疊樣式結構代碼

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

　　

方法2，若是行內塊級元素，也就是給它設置了 display:inline-block屬性,這種方法針對一些 img等行內元素,比較常用, vertical-align:middle和一個偽元素內容塊處於容器的中央, 注意要給這個偽類高度設置高度100%，此方法在IE6下失效,IE,7,8,9有用,但是又在IE10,11又失效(IEText測的)
代碼實例如下所示

html結構代碼

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

　　

css層疊樣式代碼

 

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

　　

方法3,子元素可用vertical-align:middle(使元素垂直對齊),和display:tab-cell(讓元素以表格形式渲染),父元素使用display:table,讓元素以表格的形式渲染
示例代碼如下所示

html內容結構代碼

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

css層疊樣式結構代碼

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

　　

優點：
這種方法有高度的限制,此方法可以要根據元素內容動態的改變高度,是沒有空間的限制,元素的內容不會因為沒足夠的空間而被切斷或者出現滾動條,不定寬和高,可實現元素內容的水平垂直居中
缺點：
適合高版本瀏覽器,在IE6-7下無法正常運行,結構比較復雜,常見用法在移動端布局的時候，就會用到,但是為了解決IE6-7中兼容性問題,在子元素外在套一個div,並且使用hack技術,注意父級元素得加高度
代碼示例如下所示

html內容結構代碼如下所示

<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%;
}

vertical-align屬性對其 父級塊級元素td,或者th時,生效,而對於 其他塊級元素,div,p,ul,li等默認情況下是不支持的,子元素使用vertical-align,那么父級元素設置 display:table屬性,子元素設置 display:table-cell; vertical-align:middle

方法4,使用 Flex布局, display:box(聲明彈性盒模型), box-orient:vertical;(父元素設置,用來確定子元素的方向,垂直方向向的,豎着的,horizontal是橫着的), box-pack:center;(決定盒子內部剩余空間的對齊表現,這里居中)
示例代碼如下

html內容結構代碼

<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;
}

　

方法5,使用Flex布局, display:flex(聲明彈性盒模型), align-items:center(元素在側軸中間位置,富裕空間在側軸兩側) flex-direction:coluumn(設置主軸方向為垂直方向)
優點：使用display:flex布局,內容塊的寬高任意,優雅的溢出，可用於復雜的高級布局技術
缺點:IE678不支持,兼容性處理,火狐，谷歌,歐朋要瀏覽器前綴
示例代碼所示

html內容結構代碼

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

css層疊樣式代碼

　

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

　　

方法6,設置父元素相對定位(position:relative),子元素設置絕對定位position:absolute,top:50%,height高度固定,利用margin負半值的方式，讓元素垂直居中

html結構代碼示例所示　

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

　　

css結構代碼

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

優點：適用於所有瀏覽器
缺點：父元素空間不夠時,子元素可能不可見,當瀏覽器窗口縮小時,滾動條不出現時,如果子元素設置了overflow:auto,則高度不夠時會出現滾動條

 

方法7,設置父元素相對定位(position:relative),子元素設置絕對定位,margin:auto 0,高度固定,left | top | right | bottom都設置為0，但是在IE8低版本瀏覽器以下失效

html內容結構代碼　　

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

　　

css層疊樣式結構代碼　　

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

　　

方法8,需要在 居中元素前面放一個空塊級元素(比如div)即可,然后 設置這個div的高度為50%,margin-bottom為元素高度的一半,而且 居中元素需要清除浮動,需要注意的是,使用這種方法, 如果你的居中元素是放在body中的話,需要給html,body設置一個height:100%的屬性

html結構代碼如下所示

<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;
}

優點:兼容所有的瀏覽器,在沒有足夠的空間下,內容不會被切掉
缺點:元素高度被固定死,無法達到內容自適應,如果居中元素加上overflow,要么元素出現滾動條,要么元素被切掉,另外就是一個就是加上了一個空標簽

 

方法9`:使用內邊距的方式使其垂直居中　　

html示例代碼如下所示

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

css示例代碼如下所示　

　

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

　　

缺點:使用這種方法不能給容器固定高度,如果加了高度的話,要想要達到效果,那么要減去對應的高度

水平+垂直居中

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

示例代碼如下所示

html結構代碼

 

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

 

css結構代碼

 

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

　　

若是定寬定高, 使用絕對定位position:absolute,left:50%,top:50%,使用margin負半值進行元素的水平垂直居中顯示,代碼如下所示:

html結構內容代碼

 

<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)*/
}

　　

絕對定位absolute+margin:auto,同時,top:0;left:0;right:0,bottom:0這種方式使一個元素水平垂直居中也是比較常見的

html內容結構代碼

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

　　

css層疊樣式代碼

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

　　

使用js動態計算使其元素水平垂直居中

　　水平居中元素應設置為絕對定位,獲取元素的位置,距離瀏覽器左邊，上邊的距離,並且進行賦值

　　left:(瀏覽器的寬度-元素的寬度)/2

　　top:(瀏覽器的高度-元素的高度)/2

示例代碼所示

html內容結構代碼

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

css示例代碼

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

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";
  //當屏幕尺寸發生變化時
  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";
  }
}

　

使用jQuery實現元素的水平垂直居中

獲取元素

　　獲取瀏覽器可視寬度$(window).width();

　　獲取瀏覽器可視高度$(window).height();

　　元素距離瀏覽器左邊的距離left:($(window).width()-元素.width())/2

　　元素距離瀏覽器上邊的距離top:($(window).height()-元素.height())/2

　　resize:當調整瀏覽器窗口的大小時，發生 resize 事件

示例代碼

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

css層疊樣式代碼

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

js代碼

/*
*  @dec 利用jQuery實現元素水平垂直居中
*  @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
        });
 }
//當調整瀏覽器窗口的大小時,發生 resize 事件
    $(window).resize(function(){
        getStyle();
    })
})

　　

　

　　

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

聖杯布局(左中右結構,兩邊寬度固定,中間自適應)

　　左邊與右邊,使用絕對定位,左邊left:0,top:0,右邊right:0,top:0,中間使用margin

　　兩欄布局,左邊側邊欄固定,右邊主體自使用,左邊主體自適應,右邊側邊欄固定,左側邊欄固定，右主體自適應,左主體自適　　應,右側邊欄固定都是聖杯布局，解決辦法:使用絕對定位,如上,還有就是浮動布局,彈性盒模型也可以解決

示例代碼如下:
使用絕對定位實現聖杯布局

html結構代碼

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

　　

css示例代碼

 

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

　使用浮動實現聖杯布局顯示效果

 * 利用浮動布局  * 要注意位置不同,實現的效果也會不同,設置了浮動,一定要注意清除浮動

示例代碼所示

html內容結構代碼

<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;  /*清除浮動*/
}

利用彈性盒模型老版本display:box實現聖杯布局,兩邊固定,中間自適應

　　當你縮放到最小值時,中間的內容會被隱藏,你可以給中間的盒子設置一個最小寬度值即可

html結構內容代碼

<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;
    /*標准瀏覽器*/
    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;
}

　　

利用彈性盒模型新版本display:flex實現聖杯布局,兩邊固定,中間自適應

html內容結構代碼　　

<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設置主軸方向為水平方向*/
   /*決定盒子剩余空間的利用對齊方式,center表示居中*/
   -webkit-justify-content:center; /*定義了在當前行上,彈性項目沿主軸如何排布*/
   display:flex; 
   flex-direction:row;
   justify-content:center;  /*相當於老版本的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;
   /*標准瀏覽器*/
   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;
}

　　

　

實例:手機端的淘寶布局,京東上方的搜索欄,一些后台管理系統,什么兩邊固定,中間自適應結構,左固定,右自適應或者左自適應,右固定等都是聖杯布局的體現,無論是使用絕對定位還是浮動布局,前兩者都會破壞文檔流,使用定位元素會脫離文檔流,浮動會引起一些困擾的bug,比如說忘記清除浮動,設置margin-right,margin:0 auto值都會失效,在移動端布局上,使用彈性盒模型flex,無論是老版本還是新版本,對於這種兩列,三列或多列自適應,復雜的布局,用flex布局方式,都是非常強大的,但是要注意兼容性,加各瀏覽器前綴,不然的會調試半天也會沒有效果的，css的書寫順序應是選擇漸進增強的方式,從低版本到高版本
比如說下面常見移動端示例參考,可借助上面的決定定位,浮動,彈性盒模型等實現下面示例上方的搜索導航部分
京東移動端頭部搜索欄部分(左中右結構,兩邊固定,中間自適應)

 

淘寶移動端頭部搜索欄部分(左邊固定,右邊自適應)

 

　　雙飛翼布局(等高布局)

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

html內容結構代碼

<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;
}

　　

　　

總結

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

 

以下是本篇提點概要

• 水平居中

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

• 垂直居中

  • 方法1,若是單行文本內容,可以設置line-height等於父元素的高度,注意這是定高的，也就是高度是固定不變的,這種方法只適用於單行文本的元素才適用,比如塊級元素里面文本,圖片
  • 方法2，若是行內塊級元素，也就是給它設置了display:inline-block屬性,這種方法針對一些img等行內元素,比較常用,vertical-align:middle和一個偽元素內容塊處於容器的中央,注意要給這個偽類高度設置高度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;(父元素設置,用來確定子元素的方向,垂直方向向的,豎着的,horizontal是橫着的),box-pack:center;
  • 方法5,使用Flex布局,display:flex(聲明彈性盒模型),align-items:center(元素在側軸中間位置,富裕空間在側軸兩側)flex-direction:coluumn(設置主軸方向為垂直方向)
  • 方法6,設置父元素相對定位(position:relative),子元素設置絕對定位position:absolute,top:50%,height高度固定,利用margin負半值的方式，讓元素垂直居中
  • 方法7,設置父元素相對定位(position:relative),子元素設置絕對定位,margin:auto 0,高度固定,left | top | right | bottom都設置為0，但是在IE8低版本瀏覽器以下失效
  • 方法8,需要在居中元素前面放一個空塊級元素(比如div)即可,然后設置這個div的高度為50%,margin-bottom為元素高度的一半,而且居中元素需要清除浮動,需要注意的是,使用這種方法,`如果你的居中元素是放在body中的話,需要給html,body設置一個height:100%的屬性
  • 方法9:使用內邊距的方式使其垂直居中

• 水平+垂直居中

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

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

  • 聖杯(兩邊寬度固定,中間自適應)布局
    • 使用絕對定位實現聖杯布局
    • 使用浮動實現聖杯布局
    • 使用彈性盒模型Flex布局display-box實現聖杯布局
    • 利用彈性盒模型新版本display:flex實現聖杯布局
  • 雙飛翼(等高)布局
    • 一個盒子的內容變化,同樣會影響同級(兄弟)高度變換,實時同步變化,如上代碼示例所示