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

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

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

方法一：position加上margin

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

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

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

。

p>  

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

   : 
200px
2. ; 

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

   : 
absolute
3. ; 

   left

   : 0; 
right

#right

: 0; 

top: 0; #bottombottom

: 0;   

#}  

}  

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

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

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

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

4. #     

   <p class= "center"

>
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

   : 
100px
2. ; 

   height

   : 
100px
3. ;   

}   

  

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

方法四：

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

1. ##XML/HTML Code

   複製內容到剪貼簿

2.   <p 

   class
=
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. #margin

   : 

   auto
#;
}   

  移動端首選

方法六：

純position

1. #XML/HTML Code

   複製內容到剪貼簿

2. #  <

4. ## p 

   class
=
5. "wrap"
   >

  

    

<#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

   ; 
position
5. : 

   absolute

   ; 
width
6. : 

   100px

   ; 
height

: 

100px

; 

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

margin-top

:-50px;   

}     

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

   子元素（conter）的left值計算公式：left=(父元素的寬- 子元素的寬) / 2=(200-100) / 2=50px;
子元素（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">  #    <

    
class
5. =

   "tableCell">  

   #        
<

6. #ofclass##<p

   #class#1 #=
"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.   <

p
3.  

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

#>

4. p>  

5. ##

1. #。 p>    

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

   : 
yellow
3. ; 

   width

   : 
#200px
4. ; 

   height

   : 
#200px

; 

display

: flex align- items: 

center
; 

justify

-content: center;   

1. #} .center { 

   background
: 
2. green

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

   100px
;   

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

#複製內容到剪貼簿

## ####  ################<######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

   ; 
height
3. : 

   100px

   ; 
margin
4. : 

   auto

   ;   

1. ##1
#}   

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

XML/HTML Code

3. #複製內容到剪貼簿

4.   #<

   p
 
5. class
   #class
=

"wrap"

>

  

#    <

p
1. # 

   class ="center">#p>  

2. ##p>    

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

5. } 

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

    { 

   background
: 

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中文網其他相關文章！