html - Translate(-50%, -50%) and position: relative issue on different browsers -

i've issue trying translate element -50%, -50%.

i've code below executes differently in firefox , in chrome. firefox renders trying achieve (the center position of element class .two) chrome loses it.

what i've figured out far it's case of position: relative need instead of absolute calculate width , height of element in relation parent.

body, html {    height: 100%; width: 100%;    margin: 0; padding: 0;  }    .one {    background: red;    width: 100%;    height: 100%; /* anothet purposes */    min-height: 30%;    max-height: 50%;  }    .two {    background: orange;    display: inline-block;    height: 80%;    width: auto; max-width: 90%;    position: relative;    top: 50%;    left: 50%;    transform: translate(-50%,-50%);  }

<div class="one">  <div class="two">abc</div>  </div>

the issue here container element has no explicitly-set height. true, has min-height , max-height set, not height property. (even though calculated height value of min-height)

now top: 50% means: 'move element down 50% of container's height ' so:

in chrome: top: 50% moves inner element down 50% x 0px (the container's set height) = 0px , transform moves half of it's own height.

firefox interprets top: 50% 50% of calculated height of container.

if set explicit height on container work in chrome well:

body, html {    height: 100%; width: 100%;    margin: 0; padding: 0;  }    .one {    background: red;    width: 100%;    height: 150px; /* anothet purposes */    min-height: 30%;    max-height: 50%;  }    .two {    background: orange;    display: inline-block;    height: 80%;    width: 80%;    max-width: 90%;    position: relative;    top: 50%;    left: 50%;    transform: translate(-50%,-50%);  }

<div class="one">  <div class="two">abc</div>  </div>