.divider { position: relative; font-size: 28px; color: $color_font_one; // 垂直 &-vertical { display: inline-block; width: 1px; height: 1em; margin: 0 8px; border-left: 1px $borderStyle $borderColor; vertical-align: middle; } // 水平 &-horizontal { display: block; width: 100%; height: 1px; margin: 48px 0; border-top: 1px $borderStyle $borderColor; } &-text{ position: absolute; text-align: center; padding: 0 40px; font-size: inherit; font-weight: 500; color: currentColor; background-color: #fff; } } .is{ &-center{ left: 50%; transform: translateX(-50%) translateY(-50%); } &-left{ left: 20px; transform:translateY(-50%); } &-right{ right: 20px; transform:translateY(-50%); } }