本文介绍如何在多个div容器内，优雅地实现垂直居中的线条效果。
解决方案：利用伪元素
通过CSS伪元素::after，我们可以轻松创建并定位线条：
<code class="css">div {
position: relative; /* 关键：设置相对定位，以便伪元素定位 */
}
div::after {
content: ''; /* 必须添加 */
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px; /* 线条高度 */
transform: translateY(-50%); /* 关键：垂直居中 */
background-color: black; /* 线条颜色 */
}</code>
步骤详解：
立即学习“前端免费学习笔记（深入）”；
-
相对定位: 为
div设置position: relative;，这是让伪元素能够使用绝对定位的关键。 -
伪元素创建:
div::after创建一个伪元素，作为我们的线条。content: '';是必须的，用于告诉浏览器这个伪元素不包含任何文本内容。 -
绝对定位与居中:
position: absolute;使线条相对于父元素(div)进行定位。top: 50%;将线条的顶部置于父元素高度的50%处，transform: translateY(-50%);则将其向上移动自身高度的一半，从而实现垂直居中。left: 0;和width: 100%;保证线条横跨整个div。 -
线条样式:
height: 1px;设置线条高度，background-color: black;设置线条颜色。您可以根据需要调整这些属性。
通过以上方法，即可在每个div内部轻松创建一条垂直居中的线条，简洁高效。
