[分享]css3怎么竖线居中

CSS3中有许多方法可以实现让竖线居中，下面我们来了解其中的两种实现方式。

方法一：

 .container {
        display: flex;
        justify-content: center;
    }

    .line {
        width: 1px;
        height: 50px;
        background-color: #000000;
    } 

以上代码中，我们使用了flex布局，并设置了该容器的主轴方向居中对齐，然后在其内部放置了一条宽为1px、高为50px的竖线元素。

方法二：

 .container {
        position: relative;
    }

    .line {
        position: absolute;
        left: 50%;
        top: 0px;
        transform: translateX(-50%);
        width: 1px;
        height: 50px;
        background-color: #000000;
    } 

以上代码中，我们使用了绝对定位，并将左偏移量置于容器的50%处，再通过transform属性将其左移宽度的一半，实现中心对齐。同时，我们设置了元素的高度和颜色。

综上，以上两种方法都可以很好地实现竖线居中，具体选择哪种取决于实际需求和布局。希望以上内容对您有所帮助。