html - 如何在 div 上创建垂直居中的 session 边框？

Question

这是我目前拥有的:http://jsfiddle.net/F8AN4/

我想要在垂直居中并指向屏幕左侧/右侧的 div 两侧各有一个边框。我已经看到很多人这样做了，但是我这辈子都不知道该怎么做!

它看起来像:

-----|DIV|------

CSS

div {
    background: lightgreen;
    height: 100px;
    margin: 0 auto;
    position: relative;
    width: 200px;
}   

div::after {
    border-right: 10px solid black; // not sure how to do this.
    content: "";
    top: 0; left: 0; right: 0; bottom: 0;
    position: absolute;    
}

div::before {
    content: "";
    top: 0; left: 0; right: 0; bottom: 0;
    position: absolute;    
}

有什么想法吗？

Answer 1

您将需要两个包装容器:一个包含内容的内部 div 和一个外部 div:

<div class="outer">
    <div class="inner"></div>
</div>

CSS 很简单——外部 div 需要有 100% 的宽度(这样伪元素可以拉伸(stretch)到整个宽度)，而内部 div 可以有一个你稍后指定的宽度。

.inner {
    background: lightgreen;
    height: 100px;
    margin: 0 auto;
    width: 200px;
}
.outer {
    position: relative;
    width: 100%;
}
.outer:before {
    border: 1px solid #000;
    box-sizing: border-box;
    content:"";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

CSS transform 属性用于确保伪元素完全垂直居中——当您想要的水平线很粗时，这很重要。

如果希望水平线的尺寸为奇数，可以选择指定单个边框的高度，即border-top: 1px solid #000;，或者放弃border属性并设置高度和背景颜色。无论哪种方式都有效:)

http://jsfiddle.net/teddyrised/F8AN4/9/

[编辑]:删除外部 div 的底部边距，代码工作没有必要；)