html - 使用翻译定位时边框变宽

Question

无论屏幕大小如何，我都希望有一条始终位于 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>

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

Answer 1

这是更新后的代码供您引用:

1. 列表项

.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>