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> 

DEMO: 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/

Любые идеи, как решить эту проблему? Заранее спасибо.

EDIT: Спасибо за все ответы. Они отлично работают, но я не могу заставить его работать так же, когда я добавляю его на свой сайт. После того, как я вставляю код заголовок, а текст ниже его исчезает, отображается только строка. Что мне не хватает? DEMO: http://jsfiddle.net/8a3vwkcp

Answer 1

Пожалуйста, используйте height:100% вашего тела, 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>

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 */ 
}