css - 无法居中 :after and :before horizontally and vertically

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>