sass – scss 水平垂直致中的寫法

/**
水平垂直置中,.outer 務必添加width與height
範例
    <div class="herver_center outer">
        <div class="herver_center inner">置中元素</div>
    </div>
*/ 
.herver_center
{
    //外圍
    &.outer 
    {
        text-align: center;
        margin: 0 auto;

        &:before, &:after
        {
            content: '';
            display: inline-block;
            vertical-align: middle ;
            height: 100%;
        }
    }
     
    //內圍
    .inner 
    {
        display: inline-block;
        vertical-align: middle;
    }
}

利用:before 與 :after 的方法。

基本上不寫成 mixin了,把這段作成model, 要用時直接指定 class 即可。

發表迴響