CSS writing-mode与普通block元素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">
    <div class="auto">div块状元素</div>
</div>

<p><strong>垂直流-margin-top:auto;margin-bottom:auto垂直居中</strong></p>
<div class="box verticle-mode">
    <div class="auto">div块状元素</div>
</div>
                

效果:

默认流-margin-top:auto;margin-bottom:auto不居中

div块状元素

垂直流-margin-top:auto;margin-bottom:auto垂直居中

div块状元素