html - 通过平移定位时边框变宽

无论屏幕大小如何，我都希望有一条垂直线始终保持在div容器的中间，并且我也希望它的宽度为1px。但是当我添加transform：translate(-50%, -50%);时，我不知道为什么，但是我的边框变得比我预期的要胖。这是我的HTML / CSS代码。

.cases-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: black;
    width: 480px;
    height: 110px;
    position: relative;
}
.item-border {
    border-left: 1px solid #ff5a00;
    height: 95px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    

<div class="cases-container">

  <div class="item-border"></div>

</div>

那么，这里的问题是什么？

最佳答案

这是更新的代码供您参考：


项目清单

.cases-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: black;
    width: 480px;
    height: 110px;
    position: relative;
}
.item-border {
    border-left: 1px solid #ff5a00;
    height: 95px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);

<div class="cases-container">

  <div class="item-border"></div>

</div>

关于html - 通过平移定位时边框变宽，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47285488/