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

请使用 height:100% 你的 body，Html 和父 div 就可以了

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>