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>

DEMO： https://jsfiddle.net/ttkwxdnh/

任何想法如何解决这个问题？提前谢谢。

编辑：感谢所有答案。它们工作得很好，但是当我将它添加到我的网站时，我无法以相同的方式工作。将代码粘贴到标题后，其下方的文本消失，仅显示该行。我错过了什么？ DEMO ：http://jsfiddle.net/8a3vwkcp

Answer 1

请使用您身体的height:100%，Html和父div，然后才能正常工作

＆＃13;

＆＃13;

html,
body{height:100%}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

为了使水平`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 */
}

Answer 3

我想，这就是你要找的东西。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;