html - 在标题中垂直居中内容？

Question

如何在 div 中垂直居中 img 和 h1？现在我在标题中有一个 png 和一个 h1，但内容自动位于左上角。我如何将它放在中间并保持响应？这是我的 HTML:

header {
  text-align: center;
  max-height:680px;

}

<header>
  <h1 id="title">Lorem Ipsum</h1>
  <img id="arrows" src="images/arrows.png">
  <h3 id="sub-title">Lorem ipsum</h3>
</header>

编辑:抱歉，我应该提到页眉具有特定高度。如何将文本和图像垂直和水平放置在标题中间？

Answer 1

我知道两种垂直对齐方式。

第一种方式:使用表格

header {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.wrapper {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

<div class="wrapper">
    <header>
         <h1 id="title">Lorem Ipsum</h1>
         <img id="arrows" src="images/arrows.png">
         <h3 id="sub-title">Lorem ipsum</h3>
    </header>
</div>

第二种方式:使用相对位置

body, html {
    height: 100%;
}
div.wrapper {
    height: 100%;
}
header {
    text-align: center;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

<div class="wrapper">
    <header>
         <h1 id="title">Lorem Ipsum</h1>
         <img id="arrows" src="images/arrows.png">
         <h3 id="sub-title">Lorem ipsum</h3>
    </header>
</div>