如何在Firefox中垂直居中变换旋转中的伪元素

Question

我在如何在变换过程中让X保持在中间时遇到了麻烦。看起来这个问题只发生在Chrome和FF之间的Firefox浏览器中。

我使用FF Quantum 58.0.2并且X移到顶部，在Chrome中我没有问题。

我尝试在伪元素选择器中添加top: 50%;，但在旋转期间，X将几个像素移动到底部。有没有其他方法可以在Firefox中实现这一点，就像在Chrome中一样？

＆＃13;

＆＃13;

.close >.x-button{
  width: 0.5em;
  height: 0.5em;
  position: relative;	
  background-color: #343a40;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0.5em 0em;
  transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  transform-origin: center center;
}
.close >.x-button::before,
.close >.x-button::after{
  position: absolute;
  content: '';
  width: 100%;
  height: 0.08em;
}
.close:hover >.x-button{
    border-radius: 0;
    background-color: transparent;
    -ms-transform: scale(1.8) rotateZ(-360deg);
    -o-transform: scale(1.8) rotateZ(-360deg);
    -webkit-transform: scale(1.8) rotateZ(-360deg);
    -moz-transform: scale(1.8) rotateZ(-360deg);
    transform: scale(1.8) rotateZ(-360deg);
}
.close:hover >.x-button::before,
.close:hover >.x-button::after {
  background-color: #FD0030;
}
.close >.x-button::before{
	-ms-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.close >.x-button::after{
	-ms-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

＆＃13;

<button class="close">
  <span class="x-button"></span>
</button>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您还可以在

上添加bottom: 0.20em

.close >.x-button::before,
.close >.x-button::after

在所有浏览器上修复它。

为什么.20em？ .25em是图标尺寸的一半，.5em是上下边距的一半。

火狐：

段：

.close>.x-button {
  width: 0.5em;
  height: 0.5em;
  position: relative;
  background-color: #343a40;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0.5em 0em;
  transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  transform-origin: center center;
}

.close>.x-button::before,
.close>.x-button::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 0.08em;
  /* new */
  bottom: .20em;
}

.close:hover>.x-button {
  border-radius: 0;
  background-color: transparent;
  -ms-transform: scale(1.8) rotateZ(-360deg);
  -o-transform: scale(1.8) rotateZ(-360deg);
  -webkit-transform: scale(1.8) rotateZ(-360deg);
  -moz-transform: scale(1.8) rotateZ(-360deg);
  transform: scale(1.8) rotateZ(-360deg);
}

.close:hover>.x-button::before,
.close:hover>.x-button::after {
  background-color: #FD0030;
}

.close>.x-button::before {
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.close>.x-button::after {
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

<button class="close">
  <span class="x-button"></span>
</button>

Answer 2

您可以像使用任何位置绝对元素一样垂直居中前后

给它top: 50%和transform: translateY(-50%)

我在Mac FF上验证了这一点

.close >.x-button{
  width: 0.5em;
  height: 0.5em;
  position: relative;	
  background-color: #343a40;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0.5em 0em;
  transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  transform-origin: center center;
}
.close >.x-button::before,
.close >.x-button::after{
  position: absolute;
  content: '';
  width: 100%;
  height: 0.08em;
  top: 50%;
}
.close:hover >.x-button{
    border-radius: 0;
    background-color: transparent;
    -ms-transform: scale(1.8) rotateZ(-360deg);
    -o-transform: scale(1.8) rotateZ(-360deg);
    -webkit-transform: scale(1.8) rotateZ(-360deg);
    -moz-transform: scale(1.8) rotateZ(-360deg);
    transform: scale(1.8) rotateZ(-360deg);
}
.close:hover >.x-button::before,
.close:hover >.x-button::after {
  background-color: #FD0030;
}
.close >.x-button::before{
	-ms-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg) translateY(-50%);
}
.close >.x-button::after{
	-ms-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg) translateY(-50%);
}

<button class="close">
  <span class="x-button"></span>
</button>