無法居中：之後和：之前：水平和垂直之前

Question

每當我需要定位東西，所以它是垂直和/或水平我通常訴諸於flexbox，如果這不是解決方案我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>