Html 为什么在internet explorer和microsoft edge浏览器上，HR标签不在中间屏幕上

我试图在InternetExplorer和MicrosoftEdge的中央屏幕上移动人力资源，但它移到了右边

Internet Explorer

谷歌浏览器

HTML

---

除此之外，为什么在internet explorer中滚动显示而不是相对定位，请按如下方式操作：

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

---

要垂直对齐，您可以给div

显示：flex

，

flex方向：column

和

调整内容：center

，但通常不需要垂直对齐hr。取而代之的是给它一个顶部和底部的边距。

您应该考虑正常的转换属性（对于旧浏览器为-ms）

对于滚动条，尝试添加

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

更新： 所以我做了三件事：

添加溢出：隐藏；到分区

将100vh更改为100%

左改：50%；左：40%

---

您已删除垂直对齐我已更新响应以包含垂直对齐。因此我做了三件事：1-添加溢出：隐藏；第2部分-将100vh更改为100%3-更改为左侧：50%；左：40%；

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

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