呵~我又来整理笔记了，废话不多说，上代码！
如何实现子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实现水平垂直居中的1010种方式
