将标题中的内容垂直居中？

Question

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

＆＃13;

＆＃13;

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

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑：对不起我应该提到标题有特定的高度。如何将文本和图像垂直和水平地放在标题的中间？

Answer 1

我知道两种垂直对齐的方法。

第一种方式：using table

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>

第二种方式：using relative position

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>

Answer 2

如果你想让它们排成一行并居中：

header{
  text-align: center;
}

h1, h3, img{
  display: inline-block;
  margin: 0 10px;
}

Answer 3

使用Flexbox水平和垂直居中。

html,
body {
  height: 100%;
}
.flex-wrap {
  display: flex;
  justify-content: center;
  height: 100%;
}
header {
  align-self: center;
}

<div class="flex-wrap">
  <header>
    <h1 id="title">Lorem Ipsum</h1>
    <img id="arrows" src="http://placehold.it/300x300">
    <h3 id="sub-title">Lorem ipsum</h3>
  </header>
</div>