0

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.

ddy250
  • 281
  • 2
  • 5
  • 16
  • because you need to move it up half the height of itself and 9px may not be that height dependant on which browser renders the checkbox – Pete Jan 07 '19 at 13:46

1 Answers1

3

Instead of

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

just use a transformation:

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

This (along with position: absolute; top: 50%; left: 50%; and a positioned parent) is a universal approach of centering any element regardless of its height and width.

connexo
  • 53,704
  • 14
  • 91
  • 128
  • I've tried this and it doesn't solve- does the parent need a specified height with this solution? In my case the parent's height is set by the child's height. – ddy250 Jan 07 '19 at 14:17
  • Also can something else with it's ancestors interfere with this solution? – ddy250 Jan 07 '19 at 14:19
  • 1
    *In my case the parent's height is set by the child's height* then `top: 50%` will already not work because the 50% relates to the parent element height. If that needs to be derived from the child's height, we're in a chicken-egg-case scenario. – connexo Jan 07 '19 at 15:43
  • 1
    @ddy250, I agree with the suggestion given by Connexo. but you said that the CSS code which you had posted above not centering the checkbox. You can make a test with this code. https://textuploader.com/1a0qo Here is the output in Edge: https://i.postimg.cc/Dz6tSrvn/9.png So its looks like your CSS code has some issue which you need to addressed. – Deepak-MSFT Jan 08 '19 at 07:36