div中的垂直对齐div [重复]答案

【问题标题】：Vertical align div in a div [duplicate]div中的垂直对齐div [重复]
【发布时间】：2018-10-24 22:53:12
【问题描述】：

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

#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;
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
<div id="Startseite">
	<div class="container CentermiddleStart">
		<div class="row">
			<div class="col-12">
				<h1>Header</h1>
				<h3>Subheader</h3>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-6" id="button-right">
				<a href="#" class="btn btn-default btn-lg">Get started</a>
			</div>
			<div class="col-xs-6" id="button-left">
				<a href="#" class="btn btn-default btn-lg">Get started</a>
			</div>
		</div>
	</div>
</div>
</body>

所以图像应该是视图的全尺寸并且按钮和文本居中

【问题讨论】：

我认为 bootstrap 有一个方便的网格系统。应该试一试。 3x3 (9) 网格系统，基本上会留下您需要的所有对齐方式，因此您可以根据需要将其居中。

标签： html css

【解决方案1】：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#Startseite {
position:relative;
}
#Startseite .its-background {
width:100% !important;
height:auto !important;
max-width:100% !important;
}
.CentermiddleStart {
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
z-index:1;
text-align:center;
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
<div id="Startseite">
<img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt="" class="its-background"/ >
	<div class="container CentermiddleStart">
		<div class="row">
			<div class="col-12">
				<h1>Header</h1>
				<h3>Subheader</h3>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-6" id="button-right">
				<a href="#" class="btn btn-default btn-lg">Get started</a>
			</div>
			<div class="col-xs-6" id="button-left">
				<a href="#" class="btn btn-default btn-lg">Get started</a>
			</div>
		</div>
	</div>
</div>
</body>

【讨论】：

我没有使用 * 和 !important 后面的 css 部分，因为它无需感谢就可以工作！

【解决方案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>

【讨论】：