CSS 元素垂直居中的 6种方法

淡淡的烟草味﹌ 2022-06-05 23:59 285阅读 0赞

#  #

# CSS 元素垂直居中的 6种方法 #

利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法，每一种适用于不同的情况，在实际的使用过程中选择某一种方法即可。

### Line-Height Method ###

![line height demo][]  
试用：单行文本垂直居中，[demo][]

代码：

html

css

垂直居中一张图片，代码如下

html

css

### CSS Table Method ###

![table cell demo][]

适用：通用，[demo][demo 1]

代码：

html

css

低版本 IE fix bug：

### Absolute Positioning and Negative Margin ###

![absolute positioning and negative margin demo][]

适用：块级元素，[demo][demo 2]

代码：

html

css

<table style="border-collapse:collapse; border-spacing:0px; max-width:100%; background-color:transparent"> 
 <tbody style=""> 
 <tr style=""> 
 <td style=""><pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 13px; white-space: pre-wrap; padding: 0px; margin-top: 0px; margin-bottom: 0px; line-height: 1.42857; color: rgb(51, 51, 51); word-break: break-all; word-wrap: break-word; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); border-radius: 4px;">1
2
3
4
5
6
7
8
9
</pre></td> 
 <td style=""><pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 13px; white-space: pre-wrap; padding: 0px; margin-top: 0px; margin-bottom: 0px; line-height: 1.42857; color: rgb(51, 51, 51); word-break: break-all; word-wrap: break-word; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); border-radius: 4px;">#parent {
 position: relative;}
#child {
 
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}</pre></td> 
 </tr> 
 </tbody> 
</table>

### Absolute Positioning and Stretching ###

![absolute positioning and vertical stretching demo][]

适用：通用，但在IE版本低于7时不能正常工作，[demo][demo 3]

代码：

html

css

<table style="border-collapse:collapse; border-spacing:0px; max-width:100%; background-color:transparent"> 
 <tbody style=""> 
 <tr style=""> 
 <td style=""><pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 13px; white-space: pre-wrap; padding: 0px; margin-top: 0px; margin-bottom: 0px; line-height: 1.42857; color: rgb(51, 51, 51); word-break: break-all; word-wrap: break-word; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); border-radius: 4px;">1
2
3
4
5
6
7
8
9
10
11
</pre></td> 
 <td style=""><pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 13px; white-space: pre-wrap; padding: 0px; margin-top: 0px; margin-bottom: 0px; line-height: 1.42857; color: rgb(51, 51, 51); word-break: break-all; word-wrap: break-word; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); border-radius: 4px;">#parent {
 position: relative;}
#child {
 
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}</pre></td> 
 </tr> 
 </tbody> 
</table>

### Equal Top and Bottom Padding ###

![vertical centering with padding demo][]

适用：通用，[demo][demo 4]

代码：

html

css

### Floater Div ###

![vertical centering with floater div demo][]

适用：通用，[demo][demo 5]

代码：

html

css

<table style="border-collapse:collapse; border-spacing:0px; max-width:100%; background-color:transparent"> 
 <tbody style=""> 
 <tr style=""> 
 <td style=""><pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 13px; white-space: pre-wrap; padding: 0px; margin-top: 0px; margin-bottom: 0px; line-height: 1.42857; color: rgb(51, 51, 51); word-break: break-all; word-wrap: break-word; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); border-radius: 4px;">1
2
3
4
5
6
7
8
9
10
11
</pre></td> 
 <td style=""><pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 13px; white-space: pre-wrap; padding: 0px; margin-top: 0px; margin-bottom: 0px; line-height: 1.42857; color: rgb(51, 51, 51); word-break: break-all; word-wrap: break-word; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); border-radius: 4px;">#parent {
 height: 250px;}
#floater {
 
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#child {
 
clear: both;
height: 100px;
}</pre></td> 
 </tr> 
 </tbody> 
</table>

以上就是六种方法，可以在实际的使用过程中合理选择，参考文章《[vertical-centering][]》。

[line height demo]: /images/20220606/c5eaa1f5bcb0406b9bb0a298f5662313.png
[demo]: http://vanseodesign.com/blog/demo/vertical-centering/line-height.php
[table cell demo]: /images/20220606/5bb12fb37bca46f88a8bed195816a5b8.png
[demo 1]: http://vanseodesign.com/blog/demo/vertical-centering/table-cell.php
[absolute positioning and negative margin demo]: /images/20220606/469f77a20a8a4daf81c248fec49a3b70.png
[demo 2]: http://vanseodesign.com/blog/demo/vertical-centering/positioning-margins.php
[absolute positioning and vertical stretching demo]: /images/20220606/df46e6d0125443febd08f41812aec089.png
[demo 3]: http://vanseodesign.com/blog/demo/vertical-centering/positioning-stretch.php
[vertical centering with padding demo]: /images/20220606/dc68d12de7f64cb5aea6bd08b993f50e.png
[demo 4]: http://vanseodesign.com/blog/demo/vertical-centering/padding.php
[vertical centering with floater div demo]: /images/20220606/2b5f0c82f61f46e3b7232248f4f9474d.png
[demo 5]: http://vanseodesign.com/blog/demo/vertical-centering/floater.php
[vertical-centering]: http://www.vanseodesign.com/css/vertical-centering/