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

最新推荐文章于 2019-04-29 14:47:50 发布

苞米洋

最新推荐文章于 2019-04-29 14:47:50 发布

阅读量255

点赞数

分类专栏：笔记文章标签：前端 web css

本文链接：https://blog.csdn.net/qq_37146850/article/details/78260030

版权

笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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>

苞米洋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【个人笔记重点，不作为参考】主题：css垂直居中demo

vertical center*{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 sol
复制链接

扫一扫

专栏目录