Question

每当我需要定位某些内容以使其处于垂直和/或水平方向时，我通常会使用flexbox，如果那不是我position: absolute top:50%;的解决方案}和/或left:50%;与transform: translate(-50%,-50%);。我用以下代码尝试了这个，但是我没有得到这样的结果。

HTML

＆＃13;

.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);
    }
  }
}

＆＃13;

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

＆＃13;

我不确定如何实现这一点，我甚至尝试将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>

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

1 个答案: