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 和 parent 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>

Answer 2

我想，这就是您要找的。

.demo {
  border: 1px solid black;
  height: 200px;
  width: 200px;
  display: table-cell;
  vertical-align: middle;
  }

<div class="demo">
  <hr>
</div>

Answer 3

为了垂直居中水平 `div 在变换的同时使用绝对位置。

HTML

<div class="container">
  <div class="line"></div>
</div>

CSS

.container { position: relative; }
.line {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 2px /* whatever you want here */
}

CSS: 垂直居中线

CSS: Vertically centering line

html

css

vertical-alignment