中央と後ろ：前後左右：

Question

何かを配置する必要があるときはいつでも、私は通常フレックスボックスに頼っていましたが、それは解決策ではない場合position: absoluteとtop:50%;および/またはleft:50%;transform: translate(-50%,-50%);。私は次のコードでこれを試しましたが、そのような結果は得られませんでした。

HTML

.plus-minus-toggle { 
 
    cursor: pointer; 
 
    height: 50px; 
 
    position: relative; 
 
    width: 50px; 
 
    background: red; 
 

 
    &:before, 
 
    &:after{ 
 
    background: white; 
 
    content: ''; 
 
    height: 5px; 
 
    left: 50%; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: 21px; 
 
    transform: translate(-50%,-50%); 
 
    transition: transform 500ms ease; 
 
    } 
 

 
    &:after { 
 
    transform-origin: center; 
 
    } 
 

 
    &.collapsed { 
 
    &:after { 
 
     transform: rotate(90deg); 
 
    } 
 

 
    &:before { 
 
     transform: rotate(180deg); 
 
    } 
 
    } 
 
}

<div class="plus-minus-toggle collapsed"></div>

私は、私も親divでdivをラッピングし、そこに位置決めCSSを適用しようとした、これを実現する方法について不明な点だが、ない運それは同じだった。

Answer 1

あなたのトランスフォームは互いにオーバーライドされており、組み合わせる必要があります。

$(function() { 
 
    $('.plus-minus-toggle').on('click', function() { 
 
    $(this).toggleClass('collapsed'); 
 
    }); 
 
});

body { 
 
    padding: 30px; 
 
} 
 
.plus-minus-toggle { 
 
    cursor: pointer; 
 
    height: 50px; 
 
    position: relative; 
 
    width: 50px; 
 
    background: red; 
 
} 
 
.plus-minus-toggle:before, 
 
.plus-minus-toggle:after { 
 
    background: white; 
 
    content: ''; 
 
    height: 5px; 
 
    left: 50%; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: 21px; 
 
    transition: transform 500ms ease; 
 
    transform: translate(-50%,-50%); 
 
} 
 
.plus-minus-toggle:after { 
 
    transform-origin: center; 
 
} 
 
.plus-minus-toggle.collapsed:after { 
 
    transform: translate(-50%, -50%) rotate(90deg); 
 
} 
 
.plus-minus-toggle.collapsed:before { 
 
    transform: translate(-50%, -50%) rotate(180deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="plus-minus-toggle collapsed"></div>