div中的垂直对齐div [重复]
Posted
技术标签:
【中文标题】div中的垂直对齐div [重复]【英文标题】：Vertical align div in a div [duplicate] 【发布时间】：2018-10-24 22:53:12 【问题描述】：我正在使用 bootstrap 设计一个网站，该网站的首页具有 100% 高度和 100% 宽度的图像。现在我在图像上方添加了一些文本和两个按钮，并希望水平和垂直对齐。我在 *** 上找到了几个解决方案。但遗憾的是，它们都不适用于我的情况（只有水平中心有效）。所以这是我的代码，希望你们能找到解决方案...
#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) 网格系统，基本上会留下您需要的所有对齐方式，因此您可以根据需要将其居中。 【参考方案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" 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>
【讨论】：
以上是关于div中的垂直对齐div [重复]的主要内容，如果未能解决你的问题，请参考以下文章
如何左对齐和垂直对齐标题中的图像并将文本水平保持在div的中心[重复]