<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div中div垂直居中</title>
<style>
.parent-wraper{
position:relative;
height:50px;
border:1px solid blue;
}
.child-wraper{
border:1px solid red;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
height:50%;
margin:auto;
}
</style>
</head>
<body>
<div class="parent-wraper">
<div class="child-wraper"></div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>div中div垂直居中</title>
<style>
.parent-wraper{
position:relative;
height:50px;
border:1px solid blue;
}
.child-wraper{
border:1px solid red;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
height:50%;
margin:auto;
}
</style>
</head>
<body>
<div class="parent-wraper">
<div class="child-wraper"></div>
</div>
</body>
</html>