将一个元素左对齐，一个元素与屏幕中心对齐，垂直对齐 - CSS

Question

我有一个列表和一个h1标头。我希望列表位于左侧，h1位于屏幕中央。此外，我希望h1垂直对齐到列表的中间。列表中的高度和宽度（不会与标题重叠。在较小的屏幕上，我只是将列表放在标题下）是未知的。 h1只是一个字。因此列表确定容器的高度。

HTML

<header>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
  <h1>BLOG</h1>
</header>

CSS

header{
   width: 100%;
}
ul{
  padding: 0;
  margin: 0;
  list-style: none;
}

ul, h1{
  display: inline-block;
  vertical-align:middle;
}

我尝试了各种各样的技巧，尤其是伪元素，但说实话，我不太了解它，而且我在尝试时遇到了很长时间。

抱歉我的英文

参考：

http://css-tricks.com/centering-in-the-unknown/

http://tympanus.net/codrops/2013/07/14/justified-and-vertically-centered-header-elements/

先谢谢。

更新

提供布局照片

Answer 1

这是通过向标记添加几个包装器来实现此目的的一种方法：

<header>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
  <div id="h1-outer-wrapper">
    <div id="h1-inner-wrapper"> 
      <h1>BLOG</h1>
    <div>
  </div>
</header>

CSS：

header {
  width: 100%;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
ul, #h1-outer-wrapper {
  display: inline-block;
  vertical-align: middle;
}
#h1-inner-wrapper {
  position: absolute; 
  width: 100%;
  left: 0;
}
h1 {
  text-align: center;
  padding: 0;
  margin: -.6em 0 0 0;
}