搜尋

首頁 >web前端 >css教學 >css讓容器水平垂直居中的7種方式

css讓容器水平垂直居中的7種方式

巴扎黑
巴扎黑原創
2017-05-21 10:31:152566瀏覽

這篇文章主要為大家詳細介紹了css讓容器水平垂直居中的7種方式,具有一定的參考價值，感興趣的小伙伴們可以參考一下

這種css佈局平時用的比較多，也是面試題常出的一個題，網路上一搜一大丟，不過還是想自己總結一下。
這種方法比較多，本文只總結其中的幾種，以便加深印象。
效果圖都為這個：

方法一：position加上margin


XML/HTML Code複製內容到剪貼簿

  1. #<p #class ="wrap">  

  2.     <#p class="center">p>  

    5. 。


p>  

  1.    #CSS Code複製內容到剪貼簿 /**CSS**/ .wrap { width

    : 
    2. 200px
  2. ; 

    height: 200px; #background : yellow; position: relative;   } .wrap .#center { width: 100px; height: 100px; background: green##; margin: auto; position

    : 
    3. absolute
  3. ; 

    left

    : 0; 
    4. right

#right

: 0; 

top: 0; #bottombottom

: 0;   


#}  

}  

  1. 相容性：主流瀏覽器皆支持，IE6不支援

    2. #方法二：
  2. diaplay:table-cell

    XML/HTML Code複製內容到剪貼簿

  3.   #<##p# class# #"wrap">  

  4. #     

    <p class= "center"

    5. >

    6. p

>
  

  1. p>  

    ###  ############################ #############CSS Code######複製內容到剪貼簿#################/*&/ ### .wrap{ ###width###: ###200px###; ###height###: ###200px####; ###background###: ###yellow ###; ###display###: ###table-cell###; ###vertical-align###: ###middle###; ####text-align###: ###center###;   ####

  2. } .center{ display#: inline-block; #vertical-align: middle; width: 100px; height: 100px; background# : green;   

  3. }   

  4. ##  

#相容性：由於display:table-cell的原因，IE67不相容

方法三：position加transform


XML/HTML Code複製內容到剪貼簿

  1. #  

  2. <p class="wrap">  

  3.     

    <p class="center"> p>  

  4. #p>  

  5.   


#CSS Code複製內容到剪貼簿

  1. /* css */ .wrap { #position: relative; background: yellow; width: 200px; height:  200px;} .center { position: absolute; background##: green; green; # top:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); width

    : 
    2. 100px
  2. ; 

    height

    : 
    3. 100px
  3. ;   

}   

  

相容性：ie9以下不支援transform，手機端表現的比較好。


方法四：

flex;align-items: center;justify-content: center

  1. ##XML/HTML Code

    複製內容到剪貼簿

  2.   <p 

    class
    3. =
  3. "wrap"

    #>     <#p class="center"#>

  4. p

    >  ##


####################################################。 p######>###  ############  #########################CSS Code ######複製內容到剪貼簿######

  1. /* css */ .wrap { background: yellow; width:  200px; height: 200px; display: flex; align-items: center;  -content: center;   

  2. } .

    center { #background:  green; width: 100px; height: 100px;   

  3. #}

  4.   

行動端首選

方法五：display :flex;margin:auto


#XML/HTML Code複製內容到剪貼簿

  1. #  

  2. <#p  class="wrap">  

  3.     

    #<# #p class="center">p> ;  

  4. #p>  


#CSS Code#複製內容到剪貼簿

  1. ##/* css */

     .wrap { background: yellow; width: 200px#; height: 

  2. #1

    ; display: flex;    } .center { #background: green; width: 100px; height: 

    100px
    3. ; 
  3. #margin

    : 

    auto
    4. #;

    5. }   

  移動端首選


方法六：

純position

  1. #XML/HTML Code

    複製內容到剪貼簿

  2. #  <

  4. ## p 

    class
    5. =
  5. "wrap"

    >

    6.   


    

<#p class

=###"center"######>#########  ##################  ######################################################################## ###  ########################CSS Code#######複製內容到剪貼簿######

  1. /* css */ .wrap { background: yellow; width:  200px; height: 200px; position: relative;   

  2. #} /**方法一**/ .center { background: green; position#: # absolute; width: 100px; height: 100px#; left: 

  4. #如果111 ##; top: 50px;         #} /** 方法二**/ .center { background: green

    ; 
    5. position
  5. : 

    absolute

    ; 
    6. width
  6. : 

    100px

    ; 
    7. height
: 

100px

; 

left
##: 50%; 
top
#: 50%; 
margin-left
:-
50px
; 

margin-top

:-50px;   


}     

  1. #相容性：適用於所有瀏覽器方法六中的方法一計算公式如下：

    子元素（conter）的left值計算公式：left=(父元素的寬- 子元素的寬) / 2=(200-100) / 2=50px;
    2. 子元素（conter）的top值計算公式：top=(父元素的高- 子元素的高) / 2=(200-100) / 2=50px;
  2. 方法二計算公式：

    left值固定為50%; 子元素的margin-left= -（子元素的寬/2）=-100/2= -50px;top值也是一樣，固定為50%子元素的margin-top= -（子元素的高/2）=-100/2= -50px;#方法七：相容於低版瀏覽器，不固定寬高

  3. XML/HTML Code複製內容到剪貼簿   

  4. #<##p# class# #"table">  #    <

     
    5. class
  5. =

    "tableCell">  

    #        
    6. <

  6. #ofclass##<p

    #class#1 #=
    7. "content"

  7. >不固定寬高，自適應

p

>

    

  • #p

    >  ############################ ####  ############  ################################################################# ########CSS Code######複製內容到剪貼簿##################/*css*/### .table { ###height###: ###200px###;###/*高度值不能少*/### ###width###: ###200px###;###/ *寬度值不能少*/### ###display###: table; ###position###: ###relative###; ###float####:###left## #; ###background###: ###yellow###;   ####

  • } .tableCell { display: table-cell; vertical-align: middle; vertical-align: middle; 

    text-align
    • : 
  • center

    ;               *> : 10px;   

  • #    *top: 50%;   

  • ## *

    left: 50%;   

  • #} .

    content {   

  • #    *

    #position    *

    #position
    • :
  • relative

    ;   

    •     *
  • top

    : -50%;       *#left: -50%; 

    background
    • : 
  • green

    ;   

  • }   

    • ##}   

    #  


    暫時總結上面的七種，這個方法太多，其實只要習慣了其中的一兩種就夠用了。

    總結如果是行動端，那麼用方法四和方法五是比較方便的。而且支援不固定寬高的情況，快、準、狠

    也就是用flex; align-items: center; justify-content: center;

    1. ##XML/HTML Code

      2. 複製內容到剪貼簿

    2.   <

      3. p
    3.  

      class="wrap"#>     <#p class="center"

      4. #>

    4. p>  

    5. ##


    1. #。 p>    

    2. #CSS Code 複製內容到剪貼簿/* css */ .wrap { background

      : 
      3. yellow
    3. ; 

      width

      : 
      4. #200px
    4. ; 

      height

      : 
      5. #200px
    ; 

    display

    : flex align- items: 

    center
    ; 

    justify

    -content: center;   

    1. #} .center { 

      background
      2. : 
    2. green

      ; width: 100px; height: 100px; height#: 

      100px
      3. ;   

    3. }     或display:flex;margin:auto; XML/HTML Code

      4. #複製內容到剪貼簿


    ## ####  ################<######p### ###class#######class###=# ##"wrap"######>###  #############    ###<######p#### ###class### =###"center"######>#########  ##################################################################################### ##########  ############  ########### ########

    CSS Code複製內容到剪貼簿

    1. /* css */ .wrap { background: yellow; width: 200px; height: 200px; display : flex;   

    2. } .center { background: green; #width##green; #width##green; #width##green; #width: 100px

      ; 
      3. height
    3. : 

      100px

      ; 
      4. margin
    4. : 

      auto

      ;   


    1. ##1
      2. #}   

    2.   #如果是PC端，要考慮相容性的話。方法六是不錯滴，也就是純position。

      3. XML/HTML Code

    3. #複製內容到剪貼簿

    4.   #<

      p
      5.  
    5. class

      #class
      6. =
    "wrap"


    >

      

    #    <

      p
    1. # 

      class ="center">#p>  

    2. ##p>    

    4. #CSS Code#複製內容到剪貼簿##/* css */  .wrap { background: yellow; width: 200px#; height: #1 ; position: relative;   

    5. } 

      /**方法一**/
      6.  .
    6. center

       { 

      background
      7. : 
    green

    ; 

    position

    : 

    absolute###; ####width###: ###100px ###; ###height###: ###100px###; ###left###: ###50px###; ####top###: ###50px## #;     ############     ###########} ###/**方法二**/### .####center### { ###background###: ###green###; ###position###: ###absolute###; ###width###: ####100px####; ###width###: ####100px####; ## #height###: ###100px###; ###left###: 50%; ###top###: 50%; ####margin-left####:-### 50px###; ###margin-top###:-###50px###;   ###########}   ############  # ###########如果PC端的中間的元素高度不固定，那麼就用方法七即可，程式碼就不複製了。 ######這種css元素垂直的如果真的要總結起來，應該有十幾二十幾種。不過也沒必要全部掌握吧，只要大概了解一些，用起來沒有副作用就好。 ###

    以上是css讓容器水平垂直居中的7種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！

    陳述：
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
    上一篇：詳細分析關於CSS3中新增的特性下一篇：詳細分析關於CSS3中新增的特性

    相關文章

    看更多