利用CSS的Sass预处理器（框架）来制作居中效果

在这里让我们暂停一下，深入分析后续逻辑的层次：
width height solution
null   null   translate  
defined   defined   margin  
defined   null   margin-left + translateY  
null   defined   margin-right + translateX  

秀代码：

CSS Code复制内容到剪贴板

@mixin center($width: null, $height: null) {   

    position: absolute;   

    top: 50%;   

    left: 50%;   

    @if not $width and not $height {   

        // Go with `translate`   

    } @else if $width and $height {   

        // Go width `margin`   

    } @else if not $height {   

        // Go with `margin-left` and `translateY`   

    } @else {   

        // Go with `margin-top` and `translateX`   

    }   

}  

通过上面的代码，我们已经搭好了 mixin 的骨架，只需要再添加上具体的逻辑代码即可：

CSS Code复制内容到剪贴板

@mixin center($width: null, $height: null) {   

    position: absolute;   

    top: 50%;   

    left: 50%;   

    @if not $width and not $height {   

        transform: translate(-50%, -50%);   

    } @else if $width and $height {   

        width: $width;   

        height: $height;   

（编辑：上饶站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!