巧用伪元素，轻松实现DIV垂直居中分割线
本文介绍如何利用CSS伪元素在DIV容器内创建一条垂直居中的分割线。
实现方法：
-
创建伪元素: 使用
::after伪元素，并设置如下样式：-
position: absolute;: 使伪元素相对于父元素进行绝对定位。 -
content: "";: 伪元素需要一个内容，即使是空字符串。 -
top: 50%;: 垂直方向定位到父元素的中间。 -
left: 0;: 水平方向定位到父元素的左边。 -
width: 1px;: 设置分割线的宽度。 -
height: 100%;: 设置分割线的高度，使其贯穿整个DIV。 -
transform: translateY(-50%);: 将伪元素垂直方向移动自身高度的一半，实现垂直居中。 -
background-color: #ccc;(或其他边框样式): 设置分割线的颜色或样式。
-
示例代码：
div {
position: relative;
height: 200px; /* 示例高度，可根据实际情况调整 */
width: 300px; /* 示例宽度，可根据实际情况调整 */
border: 1px solid #eee; /* 可选：添加DIV边框 */
}
div::after {
position: absolute;
content: "";
top: 50%;
left: 0;
width: 1px;
height: 100%;
transform: translateY(-50%);
background-color: #ccc;
}
通过以上步骤，即可在DIV容器内创建一条垂直居中、贯穿整个容器的分割线。 您可以根据需要调整分割线的颜色、宽度等属性。
