Why is my checkbox not vertically aligned in it's parent?

Question

I have a checkbox with this css code:

.row-checkbox {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12px;
  margin-top: -9px;
}

It's parent is a element with position: relative;. I'm having problems vertically centering the checkbox in Edge browser (in chrome works fine). It seems that the top:50% isn't working in either browsers, but something in chrome still makes it centered.

I don't want to change make a big change like changing to flex because I have these elements all over my project, I would just want to add a fix to support Edge.

I've been trying to solve it for hours now, a lot of things that didn't work.

Answer 1

代替

margin-left: -12px;
margin-top: -9px;

只需使用转换即可

transform: translate(-50%, -50%);

此方法（连同position: absolute; top: 50%; left: 50%;和 positioned 父级）是一种通用方法，可将任何元素居高放置，而不论其高度和宽度。