Kann nicht zentriert werden: nach und: vor horizontal und vertikal

Question

Immer wenn ich etwas so vertikal und/oder horizontal positionieren muss, würde ich normalerweise auf flexbox zurückgreifen, und wenn das nicht die Lösung ist position: absolute mit top:50%; und/oder left:50%; mit transform: translate(-50%,-50%);. Ich habe das mit folgendem Code versucht, aber solche Ergebnisse habe ich nicht bekommen.

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>

Ich bin nicht sicher, wie dies zu erreichen, habe ich versucht, auch die div in einem übergeordneten div Einwickeln und die Positionierung css dort Anwendung, aber kein Glück, Es war dasselbe.

Answer 1

Ihre Transformationen übersteuern einander und müssen kombiniert werden.

$(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>