html - CSS:垂直居中线

Question

我正在尝试将网站上的水平线垂直居中。示例:下图中的黄线:

到目前为止我已经尝试过以下代码。

<div style="position:relative;">
<div style="position:absolute;left:50%;margin-  left:-50%;top:50%;margin-top:-1px;width:100%;height:2px;">
<div style="height:2px;border:none;color:#ffff00;background-color:#ffff00;"></div></div></div>

演示: https://jsfiddle.net/1kxw9g9o/

和这个一样，但是还是不行。

<div style="display:flex;justify-content:center;align-items:center;">
<div style="width:100%;height:2px;">
<div style="height:2px;border:none;color:#ffff00;background-color:#ffff00;"></div></div></div>

演示: https://jsfiddle.net/ttkwxdnh/

有什么想法可以解决这个问题吗？提前致谢。

编辑:感谢您的所有回答。它们工作得很好，但是当我将其添加到我的网站时，我无法让它以同样的方式工作。粘贴代码后，标题及其下面的文本消失，只显示该行。我缺少什么？ 演示:http://jsfiddle.net/8a3vwkcp

Answer 1

请使用您的 body 、Html 和父 div 的 height:100% 即可正常工作

html,
body{height:100%}

<div style="position:relative;height:100%">
<div style="position:absolute;left:50%;margin-left:-50%;top:50%;margin-top:-1px;width:100%;height:2px;">
<div style="height:2px;border:none;color:#ffff00;background-color:#ffff00;"></div></div></div>