CSS 如何在 div 中间（水平）创建边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29291798/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I create a border in the middle of the div (horizontally)?
提问by cyber8200
I have a line of objects/elements like this:
我有一行这样的对象/元素：
I want to create a line, and place it behindall my objects, in the centerif my div.
我想创建一条线，并将其放置在我所有对象的后面，如果我的 div位于 中心。
Here is what I'm hoping to make:
这是我希望做的：
To create a border on top, right, bottom, left, or around a div is quite simple, but in the middle of the div is surprisingly hard. I've been trying to research on this, but I don't see any good one so far.
在 div 的顶部、右侧、底部、左侧或周围创建边框非常简单，但在 div 的中间却出奇地困难。我一直在尝试对此进行研究，但到目前为止我还没有看到任何好的结果。
Any CSS expert want to show off your CSS skill?
有没有 CSS 专家想炫耀您的 CSS 技能？
采纳答案by Brett East
Give this a go:
试一试：
html
html
<div></div>
css
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%);
}
回答by Brett East
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;
}
