,可以通过以下步骤实现:
<div id="line"></div>
#line {
position: relative;
width: 1px;
height: 100px;
border-left: 1px dashed #000;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
解释:
position: relative;
:将div元素相对于其正常位置进行定位。width: 1px;
:设置虚线的宽度为1像素。height: 100px;
:设置虚线的高度为100像素。border-left: 1px dashed #000;
:设置左边框为1像素宽的虚线,颜色为黑色。top: 50%;
:将div元素的顶部位置设置为父元素的50%。left: 50%;
:将div元素的左侧位置设置为父元素的50%。transform: translate(-50%, -50%);
:通过使用负的50%的偏移量,将div元素在垂直和水平方向上居中。这样,就可以在div上方显示一个居中的垂直虚线了。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)
领取专属 10元无门槛券
手把手带您无忧上云