为什么HR标签不在Internet Explorer和Microsoft Edge浏览器上的中间屏幕

Question

I tried to move hr in center screen on internet explorer and microsoft edge but It's moved to right.

Internet Explorer

Preview Image

Google Chrome

Preview Image

HTML

<div style="width: 100%; height: 100vh; background-color: rebeccapurple">
    <hr style="
    width: 80%;
    height: auto;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
">
</div>

Addition to that why scroll showing in internet explorer

Answer 1

Instead of positioning it relative, do it like that:

<div style="width: 100%; height: 100vh; background-color: rebeccapurple">
    <hr style="
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
">
</div>

To vertically align you could give the div display: flex , flex-direction: column and justify-content: center , but generally it's not required to vertically align a hr. Instead give it a margin top and bottom.

Answer 2

You should put into consideration normal transform property (and -ms for old browsers)

-moz-transform:    translate(-50%, -50%);
-o-transform:      translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

and for the scrollbar, try adding

@-ms-viewport { width: device-width; }
overflow-y: hidden;

UPDATE: So I did three things:

1. Add overflow:hidden; to the div
2. Change 100vh to 100%
3. Changed left: 50%; to left: 40%;