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>