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

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

top: 0; #bottombottom

#}  

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

方法三：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. ;   

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

1. ##XML/HTML Code

   複製內容到剪貼簿

2.   <p 

   class
=
3. "wrap"

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

4. p

   >  ##

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

  移動端首選

方法六：

1. #XML/HTML Code

   複製內容到剪貼簿

2. #  <

4. ## p 

   class
=
5. "wrap"
   >

  

<#p class

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
; 

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

##}   

#  

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

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

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

center
; 

-content: center;   

1. #} .center { 

   background
: 
2. green

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

   100px
;   

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

#複製內容到剪貼簿

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
=

>

#    <

p
1. # 

   class ="center">#p>  

2. ##p>    

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

5. } 

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

    { 

   background
: 

; 

: 

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