如何在div中垂直居中HR标签？现有代码无法完美居中

你当前代码无法完美居中的核心问题是transform: translateY(-100%)的取值错误。当设置top: 50%时，HR标签的顶部会被定位到容器的垂直中点，此时需要让HR向上偏移自身高度的50%，才能让整个标签垂直居中。

修正绝对定位方案的代码 #

.container {
    position: relative;
    width: 80vw;
    height: 40vh;
    border: solid 4px #333;
}

hr {
    height: 5px;
    background-color: cadetblue;
    position: absolute;
    right: 0;
    top: 50%;
    left: 0;
    margin: 0; /* 清除HR默认的上下margin，避免干扰居中效果 */
    transform: translateY(-50%); /* 改为偏移自身高度的50% */
}

更简洁的Flex布局方案 #

如果不想用绝对定位，Flex布局是更直观的选择，不需要计算偏移量：

.container {
    width: 80vw;
    height: 40vh;
    border: solid 4px #333;
    display: flex;
    align-items: center; /* 直接实现容器内元素垂直居中 */
}

hr {
    height: 5px;
    background-color: cadetblue;
    width: 100%; /* 让HR铺满容器宽度 */
    margin: 0; /* 清除默认margin */
}

HTML代码保持不变：

<div class="container">
  <hr>
</div>

备注：浏览器默认会给HR标签添加上下margin，所以一定要加上margin: 0来清除，否则即使布局逻辑正确，视觉上也会出现偏移。

内容的提问来源于stack exchange，提问作者mmh4all