无法居中：之后和：之前：水平和垂直之前

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>