div中的垂直对齐div

Question

我正在设计一个使用bootstrap的网站，第一页有100％高度和100％宽度的图像。现在我在图像上方添加了一些文本和两个按钮，并希望水平和垂直对齐。我在Stackoverflow上找到了几个解决方案。但遗憾的是，没有一个在我的情况下工作（只有横向中心工作）。所以这是我的代码，我希望你们能找到解决方案......

jest.fn()

#Startseite {
	background: url(http://qnimate.com/wp-content/uploads/2014/03/images2.jpg) no-repeat center center fixed; 
	width: 100%;
	position: relative;
	height: 100%;
	background-size: cover;
	text-align: center;
	display: table;
	vertical-align: middle;
}
.CentermiddleStart {
  display: inline-block;
}
#Startseite #button-right{
    text-align: right;
}
#Startseite #button-left{
    text-align: left;
}

因此图像应该是视图的完整大小，按钮和文本居中

Answer 1

Xamarin.Mac

AppKit

Answer 2

Flex解​​决方案：

JSFiddle demo

#Startseite {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: url(http://qnimate.com/wp-content/uploads/2014/03/images2.jpg) no-repeat center center fixed;
  width: 100%;
  position: relative;
  height: 100%;
  background-size: cover;
}

没有Bootstrap的解决方案：

JSFiddle demo

<div id="Startseite">
  <h1>Header</h1>
  <h3>Subheader</h3>

  <div class="buttons">
    <button id="button-right">
      <a href="#">Get started</a>
    </button>

    <button id="button-left">
      <a href="#">Get started</a>
    </button>
  </div>
</div>