对于内联样式，我使用了以下代码:

<div style="border-left:1px black solid; position:absolute; left:50%; height:300px;" />

这样就把它直接放在了中心。

如果你的目标是在容器中放置垂直线来分离并排的子元素(列元素)，你可以考虑这样样式化容器:

.container > *:not(:first-child) {
  border-left: solid gray 2px;
}

这将为从第2个子元素开始的所有子元素添加左边框。换句话说，相邻子节点之间有垂直边界。

>是子选择器。它匹配左边指定的元素的任何子元素。 *是一个通用选择器。它匹配任何类型的元素。 :not(:first-child)表示它不是其父节点的第一个子节点。

浏览器支持:> *:first-child和:not()

我认为这比简单的.child-except-first {border-left:…}规则，因为让垂直线来自容器的规则，而不是不同子元素的规则更有意义。

这是否比使用临时的垂直规则元素(通过样式化水平规则等)更好，将取决于您的用例，但这至少是一种替代方案。

要使垂直线在中间居中使用:

position: absolute; 
left: 50%;

还有一种可能的方法:使用SVG。

例如:

<svg height="210" width="500">
    <line x1="0" y1="0" x2="0" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
      Sorry, your browser does not support inline SVG.
</svg>

优点:

你可以有任意长度和方向的直线。 您可以轻松地指定宽度，颜色

缺点:

现在大多数现代浏览器都支持SVG。但是一些旧的浏览器(如IE 8或更老的版本)不支持它。

要在div中创建一条居中的垂直线，我认为你可以使用这段代码。 “容器”可能是100%的宽度，我猜。

div.container { 宽度:400 px; ｝ div.vertical-line { Border-left: 1px solid #808080; 身高:350 px; margin-left:汽车; margin-right:汽车; 宽度:1 px; ｝ < div class = "容器" > < div class = "垂直线”>,< / div > < / div >

没有与<hr>元素等值的垂直元素。然而，你可能想尝试的一种方法是在你要分离的东西的左边或右边使用一个简单的边界:

# your_col { Border-left: 1px纯黑色; ｝ < div id = " your_col " > 你的内容在这里 < / div >