css3 线条 文字在中间

CSS3是网页设计中不可或缺的一部分，它为我们带来了很多好玩且实用的功能，比如线条和文字在中间。

实现线条可以使用CSS3中的伪元素:before和:after，加上border属性，就可以实现一个纯CSS的线条了。

.line{
    position: relative;
    padding: 20px 0;
}
.line:before{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ccc;
    transform: translateY(-50%);
}

如上面代码所示，首先需要给容器加上position: relative，这样我们才能使用position: absolute来定位伪元素。然后使用content: ""来生成伪元素，设置top: 50%和transform: translateY(-50%)来让线条在容器中垂直居中。

同样的方法也可以用于文字的垂直居中，只需要在容器中加上display: flex和justify-content: center即可。

.text{
    display: flex;
    justify-content: center;
}
    .text >
 p{
    position: relative;
}
    .text >
 p:before{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ccc;
    transform: translateY(-50%);
}
    

如上面代码所示，先给容器加上display: flex和justify-content: center，让其中的元素水平和垂直都居中，再给p标签加上position: relative，让伪元素可以相对定位在p标签内。

CSS3中还有很多有趣的功能等待我们去探索，使用好它可以让我们的页面更加生动、动态。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！