实现垂直方向margin：auto居中
writing-mode
vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left（类似IE私有值tb-rl）vertical-lr：垂直方向自左而右的书写方式。即 top-bottom-left-right
Paste_Image.png
也可以使用flex布局 子元素设置flex-direction: column;justify-content: center;使项目主轴垂直，然后再对子元素居中显示
Paste_Image.png
<style type="text/css">
#father{
width: 100%;
height: 500px;
background: lightcoral;
writing-mode:vertical-lr;
}
#son{
background: lightblue;
height: 200px;
margin:auto;
width: 200px;
}
</style>
使用absolute，auto居中定位
设置其父类元素为relative属性，子元素为absolute属性
Paste_Image.png
这里同样可以使用flex进行居中定位，使用justify-content: center;先使得子元素水平居中，然后配合align-items：center；使元素定位在垂直方向的中间
Paste_Image.png
Paste_Image.png
<style type="text/css">
#father{
height: 500px;
background: lightcoral;
position: relative;
}
#son{
background: lightblue;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 200px;
height: 100px;
margin: auto;
}
</style>