【个人笔记重点，不作为参考】主题：css垂直居中demo

最新推荐文章于 2025-01-13 14:10:41 发布

原创最新推荐文章于 2025-01-13 14:10:41 发布 · 292 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #web #css

笔记专栏收录该内容

23 篇文章

订阅专栏

本文介绍六种不同的方法实现元素在网页布局中的垂直居中。包括使用表格单元格、绝对定位与margin auto、行内高度调整、绝对定位与负margin、padding技巧以及通过两个等高div来实现。每种方法都提供了具体的CSS样式代码。

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

1.table.cell
2.absolute.margin auto
3.line-height
4.absolute. margin - 
5.padding:
6.1/2 div sesize

<!DOCTYPE html>

<html>
<head>
<title>vertical center</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
div{
font-size: 0px
}
img{
width: 30px;
}
.wrap{
border: 10px solid black;
margin: 0 auto;
width: 500px;
}
.wrap section {
border: 2px solid blue;
margin: 0px auto;
}
.wrap section>div{
border: 1px solid red
}
.wrap1{
display: table;
height: 50px;
}
.wrap1>div{
font-size: 0px;
display: table-cell;
vertical-align: middle;
/*display:inline-block;*/
}
.wrap1 img{
border: 1px solid red
}
.wrap2{
position: relative;
height:100px;
}
.wrap2>div{
position: absolute;
left: 0;
top:0;
bottom: 0;
right:0;
margin:auto;
height: 50px;
width:50px;
}
.wrap3{
text-align: center;
}
.wrap3>div{
line-height: 50px;
font-size: 0px
}
.wrap3 img{
vertical-align: middle;
}
.wrap4>div{
position: relative;
height: 100px
}
.wrap4>div>div{
border: 1px solid red;
position: absolute;
top: 50%;
left:50%;
width: 50px;
height:50px;
margin: -25px 0 0 -25px
}
.wrap5>div{
padding: 5% 0;
}
.wrap5>div>div{
padding: 10% 0;
border:1px solid red;
text-align: center;
}
.wrap6{
height: 200px;
}
.wrap6>div.sesize{
width: 100%;
height: 50%;
float: left;
margin-bottom: -50px;
border:1px solid yellow;
}
.wrap6>div.child{
width: 100%;
height: 100px;
clear: both;
}
</style>
</head>
<body>
1.table.cell
2.absolute.margin auto
3.line-height
4.absolute. margin - 
5.padding:
6.1/2 div sesize
<div class="wrap">
<section class="wrap1">
<div>
<img src="./img/1.jpg">
</div>
</section>
<section class="wrap2">
<div>

</div>
</section>
<section class="wrap3">
<div>
<img src="./img/1.jpg"> 
</div>
</section>
<section class="wrap4">
<div>
<div></div>
</div>
</section>
<section class="wrap5">
<div>
<div><img src="./img/1.jpg"></div>
</div>
</section>
<section class="wrap6">
<div class="sesize"></div>
<div class="child">
hello world!
</div>
</section>
<div6
</bo6y>
</ht6l>