如何将Div放置在具有整页背景的页面中心 [英] How to place Div in center of page with full page background

问题描述

我想使div与页面中心的一些登录信息对齐.它适用于静态值，但我想动态定位.而且背景应该覆盖整个页面，但是它只覆盖了与我的div高度相同的条带.

I want to Align my div with some login info in the center of my page. It works with static values but I want to position it dynamically. Also the background should cover the whole page but it just covers a strip with the height of my div...

这是我的代码:

.bold{
	font-weight: bold
}

#login {
	width: 300px;
	margin-left: auto;
    margin-right: auto;
    margin-top: 15%;
    background-color: white;
    border-style: outset; <!--Just there to show the border-->

}

.background {
	background-color: #f5f5f0;
	min-height: 100%;
	height: auto !important;
}

<div class=background>	
	<div class="well well-lg" id="login">
		<h2>LOGIN</h2>
		<form method="post" ng-submit="login()">
			<input name="username" type="text" ng-model="username" placeholder="username"><br>
			<input name="password" type="password" ng-model="password" placeholder="password"><br>
			<input type="submit" value="Einloggen">
		</form>

	</div>
</div>

推荐答案

将框居中:

.center { 
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

为了最大化背景:

.background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-color: #f5f5f0;
}

提琴: https://jsfiddle.net/Sprazer/g2durrLm/

这篇关于如何将Div放置在具有整页背景的页面中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！