呵~我又來整理筆記了躺坟，廢話不多說，上代碼夕膀！
如何實現(xiàn)子div在父div垂直居中的效果呢美侦？（類似下圖的效果）
子div在父div垂直居中
這里有兩種方案：
1.父：
writing-mode：vertical-lr;?子：
margin:auto;2.父：
position:relative;?子：
position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;
方案一：
父：
writing-mode：vertical-lr;
子：margin:auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>子div在父div的居中問題</title>
<style>
/* 方案一 */
.father{
width: 400px;
height: 400px;
background: red;
writing-mode: vertical-lr;
}
.child{
width: 100px;
height: 50px;
background: purple;
margin: auto;
}
</style>
</head>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
</html>
方案二：
父：
position:relative;
子：position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>子div在父div的居中問題</title>
<style>
/* 方案二 */
.father {
width: 400px;
height: 400px;
background: red;
position: relative;
}
.child {
width: 100px;
height: 50px;
background: purple;
/* 以下幾步很重要易猫！ */
margin: auto;
position: absolute;
top: 0;
/*把right：0加上就是垂直水平居中*/
/* right: 0;*/
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
</html>
附：
把right:0加上是垂直居中的最后效果：
image.png
推薦一篇文章：
CSS實現(xiàn)水平垂直居中的1010種方式
