sass – scss 水平垂直致中的寫法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
/** 水平垂直置中，.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 即可。