CSS writing-mode与图片margin:auto垂直居中实例页面

CSS代码：

.box {
    width: 400px; height: 300px;
    background-color: #f0f3f9;
    overflow: hidden;
}
.auto {
    display: block;
    margin-top: auto;
    margin-bottom: auto;
}

.verticle-mode {
    writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;      
    writing-mode: vertical-rl;
}
                

HTML代码：

<p><strong>默认流-margin-top:auto;margin-bottom:auto不居中</strong></p>
<div class="box">
    <img src="mm1.jpg" class="auto">
</div>

<p><strong>垂直流-margin-top:auto;margin-bottom:auto垂直居中</strong></p>
<div class="box verticle-mode">
    <img src="mm1.jpg" class="auto">
</div>