Вертикальный текст выравнивания внутри динамической высоты div

Question

Я хочу вертикально выровнять текст внутри div, который является динамической высотой, например, 10% страницы, но без использования известного «метода таблицы». Можно ли это сделать с помощью чистого CSS?

Кусок кода:

HTML:

<div class="post-details-wrapper"> 
    <div class="post-details-h"> 
     Post Details 
    </div> 
</div> 

CSS:

post-details-h { 
background-color: green; 
height:5%; 
width:100%; 
} 

В данном случае цель состоит в том, чтобы вертикально выровнять текст «пост -details-h "div.

Answer 1

Обычный подход - использовать дисплей: табличный материал. Но если вы не хотите использовать его, вы можете попробовать что-то вроде этого:

<div class="post-details-wrapper"> 
    <div class="post-details-h"> 
     <span>Post Details</span> 
    </div> 
</div> 

.post-details-wrapper { 
    height:350px; 
    background:red; 
} 
.post-details-h { 
    background-color: green; 
    height:10%; 
    width:100%; 
} 
.post-details-h:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 
.post-details-h span { 
    display: inline-block; 
    vertical-align: middle; 
} 

Просто добавьте промежуток, так что вы можете центрирования Täht элемента внутри .POST-деталь-час.

Вы можете проверить в JSFiddle

Надеются, что это помогает.

Answer 2

использование display: flex + align-items: center

*{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.post-details-h{ 
 
    background-color: green; 
 
    height: 100px; 
 
    width: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
}

<div class="post-details-wrapper"> 
 
    <div class="post-details-h"> 
 
     <span>Post Details</span> 
 
    </div> 
 
</div>

Answer 3

Заканчивать этот fiddle. Способ, которым я знаю, как это сделать, включает в себя два класса, например, как вы это сделали.

.post-details-h { 
    line-height: 200px; 
    width:100%; 
    vertical-align: center; 
} 

.post-details-wrapper { 
    background-color: red; 
    height: 200px; 
    position: relative; 
}