垂直居中

最新推荐文章于 2025-04-18 20:43:03 发布

原创最新推荐文章于 2025-04-18 20:43:03 发布 · 317 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了多种网页设计中使元素垂直居中的方法，包括使用display:table-cell、position:absolute、line-height等CSS属性，以及利用flex布局实现。每种方法都提供了具体的实现代码和适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

display:table-cell

通过将父元素设置为display:table-cell，并添加vertical-align: middle，它的子元素就可以实现垂直居中。
测试框架

<div id="wrap">
<div id="subwrap">
</div>
</div>

div#wrap {  
vertical-align: middle;    
display: table-cell;   
border: 1px solid #FF0099;    
background-color: #FFCCFF;    
width: 760px;    
height: 400px;       
overflow: hidden;    
}    

div#subwrap {  
border: 1px solid #000;    
background-color: #fff;  
}

本方法对于单行文本/多行文本均有效

position:absolute

给子元素设置绝对定位，并将top设置为50%，然后margin-top设置为负的元素高度的一半
测试框架

<div id="wrap">
<div id="subwrap">
</div>
</div>

div#wrap { 
position:relative;
border: 1px solid #FF0099;    
background-color: #FFCCFF;    
width: 760px;    
height: 400px;       
overflow: hidden;    
}    

div#subwrap { 
position:absolute;
left:50%;
top:50%;
width:100px;
height:100px;
margin-top:-50px;  
margin-left:-50px;   
border: 1px solid #000;    
background-color: #fff;  
}

这里写图片描述
这个方法必须在已知子元素高度的情况下才可以用

line-height

把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况。
测试框架

<div id="wrap">
<div id="subwrap">
</div>
</div>

div#wrap { 
position:relative;
border: 1px solid #FF0099;    
background-color: #FFCCFF;    
width: 760px;    
height: 400px;       
overflow: hidden;    
}    

div#subwrap { 
line-height:400px;
text-align:center;
border: 1px solid #000;    
background-color: #fff;  
}

这里写图片描述

display:inline-block/inline

这种方法需要将父元素的font-size设置为一个合适的值，再结合vertical-align: middle来进行
测试框架

<div id="wrap">
<div id="subwrap">
</div>
</div>

div#wrap { 
border: 1px solid #FF0099;    
background-color: #FFCCFF;    
width: 760px;    
height: 400px;       
overflow: hidden;  
font-size:300px; 
}    

div#subwrap { 
vertical-align: middle; 
display:inline-block;
border: 1px solid #000;    
background-color: #fff;  
width: 100px;    
height: 100px;  
}

因为涉及到父元素font-size的更改，所以要注意可能造成的影响
另一个：

<div id="demo">
    <p>这是一个终极实现的水平垂直居中实例</p>
    <!--[if lt IE 8]><span></span><![endif]-->
</div>
#demo{
    height:100px;
    text-align:center;
    font-size:0;
}
#demo:after,#demo span{
    display:inline-block;
    *display:inline;
    *zoom:1;
    width:0;
    height:100%;
    vertical-align:middle;
}
#demo:after{
    content:'';
}
#demo p{
    display:inline-block;
    *display:inline;
    *zoom:1;
    vertical-align:middle;
    font-size:16px;
}

背景图片居中

元素本身确定高宽拉伸至所需要的大小，然后给这个元素一个background- position:center center的属性。background-image设置为要呈现的图片。
测试框架

<div id="wrap">
</div>

div#wrap { 
width: 760px;    
height: 400px;       
background:url(0.png) no-repeat center;
border:solid 1px blue;
}

这里写图片描述

flex布局

父元素设置为display:flex和align-items:center
测试框架

<div id="wrap">
<div id="subwrap">
</div>
</div>

div#wrap { 
display:flex;
align-items:center; 
border: 1px solid #FF0099;    
background-color: #FFCCFF;    
width: 760px;    
height: 400px;       
}    

div#subwrap { 
border: 1px solid #000;    
background-color: #fff;  
width: 100px;    
height: 100px;  
}