如何在 div 中间（水平）创建边框？答案

【问题标题】：How can I create a border in the middle of the div (horizontally)?如何在 div 中间（水平）创建边框？
【发布时间】：2015-03-27 10:11:14
【问题描述】：

我有一行这样的对象/元素：

我想创建一条线，并将它放在我所有的对象之后，如果我的 div 位于中心。

这是我希望做的：

在 div 的顶部、右侧、底部、左侧或周围创建边框非常简单，但在 div 的中间创建边框却非常困难。我一直在尝试对此进行研究，但到目前为止我还没有看到任何好的。

有没有 CSS 专家想炫耀你的 CSS 技能？

Fiddle

【问题讨论】：

您要求只在形状中间创建水平线吗？
形状的背后。在 div 的中间。
我猜这条线不能越过圆圈一。
为什么会这样？为什么我们不能将 z-index 设置为最低？
哦，好吧，也许你应该发布一个 jsfiddle，这样我们就可以从那里开始了。

标签： css less border

【解决方案1】：

Codepen

试一试：

html

<div></div>

css

div { width: 200px; 
  height: 200px; 
  border: red 1px solid;
  position: relative;
}

div:after { content: '';
  position: absolute;
  border-right: 2px green solid;
  height: 200px;
  width: 200px;
  transform: translateX(-50%);
}
div:before { content: '';
  position: absolute;
  border-bottom: 2px green solid;
  height: 200px;
  width: 200px;
  transform: translateY(-50%);
   }

【讨论】：

嗨@rangerover.js 我已经更新了代码和笔以显示水平和垂直线:) - 不幸的是，我无法从我的工作计算机上看到这里的图像跨度>
好的，在这里查看jsfiddle@rangerover.js
感谢您的入门代码。我能够完成我想要的here
太好了，只要去掉translate 行并将top: 提升到55%，我想你会得到你想要的/

【解决方案2】：

Here is your own updated JSFiddle

.border-center { 
            width: 100%;
            border: red 1px solid;
            position: relative;
        }

.border-center:before { content: '';
        position: absolute;
        bottom: 50%;
        border-bottom: 2px green solid;
        width: 100%;
        z-index:0;
    }

【讨论】：

父是相对的，子是绝对的，我们可以有力地控制这一点！