1.使用table-cell+vertical-align
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
width:500px;
height: 400px;
background-color: greenyellow;
display:table-cell;
vertical-align: middle;
}
.child{
width:300px;
height:200px;
background-color:red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Demo</div>
</div>
</body>
</html>
原理：通過將父框轉(zhuǎn)化為一個(gè)表格單元格顯示（類似<td><tr>）有咨，再通過設(shè)置屬性，使表格單元格內(nèi)容垂直居中以達(dá)到垂直居中孕荠。
優(yōu)點(diǎn)：兼容性好，ie8以上均支持
2.使用absolute+transform
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
position:relative;
width:200px;
height:100px;
background-color:green;
}
.child{
width:50%;
height:50%;
background-color:red;
position:absolute;
top:50%;
transform:translateY(-50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child">DEMO</div>
</div>
</body>
</html>
原理：類似于水平居中時(shí)的absolute+transform原理蜓肆；
3.使用flex+align-items
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
width:300px;
height:200px;
background-color: green;
display:flex;
align-items:center;
}
.child{
width:50%;
height:50%;
background-color:red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Demo</div>
</div>
</body>
</html>
4.使用flex+flex-direction+justify-content
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
width:300px;
height:200px;
background-color:green;
display: flex;
flex-direction: column;
justify-content: center;
}
.child{
width:50%;
height:50%;
background-color:red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">DEMO</div>
</div>
</body>
</html>
5.使用absolute+margin負(fù)邊距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
width:300px;
height:200px;
background-color:green;
position:relative;
}
.child{
width:50%;
height:50%;
background-color:red;
position:absolute;
top:50%;
margin-top:-50px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">DEMO</div>
</div>
</body>
</html>
缺點(diǎn)：需知道子元素寬贷屎，高；以及高的一半蹲缠；
6.使用absolute+margin
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
width:300px;
height:200px;
background-color:green;
position:relative;
}
.child{
width:50%;
height:50%;
background-color:red;
position:absolute;
top:0;
bottom:0;
margin:auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">DEMO</div>
</div>
</body>
</html>
7.使用padding
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
width:100%;
padding:100px 0;
}
.child{
width:50%;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">DEMO</div>
</div>
</body>
</html>
