Question

我希望有一条垂直线，它始终位于div容器的中间，无论屏幕尺寸如何，我还希望它的厚度为1px。但是当我添加变换：translate(-50%, -50%);时，我不知道为什么，但我的边界变得比我预期的更胖。这是我的HTML / CSS代码。

＆＃13;

.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%);

＆＃13;

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

＆＃13;

那么，这里有什么问题？

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

使用平移定位边框时，边框会变宽

1 个答案: