Question

我想将我的div与我页面中心的一些登录信息对齐。它适用于静态值，但我想动态定位它。背景应该覆盖整个页面，但它只是覆盖了我的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>

Answer 1

对于盒子的居中：

.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/

Answer 2

检查以下代码。

 
.bold{
	font-weight: bold
}

#login {
	width: 300px;
    height: 200px;
	margin: auto;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color: white;
    border-style: outset; <!--Just there to show the border-->

}

.background {
	background-color: #f5f5f0;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto
}

<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>

Answer 3

对所有html使用背景，例如that

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
  background-color: #f5f5f0;
}

＆＃13;

Answer 4

.background {
    background-color: #f5f5f0;
    min-height: 100vh;
    height: 100% !important;
    position: relative;
    top: 0;
    display: flex;
}

#login {
    width: 300px;
    margin: 0 auto;
    background-color: white;
    top: 50%;
    position: absolute;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0;
}

Answer 5

这是如何在后台实现登录窗口居中的Example。在CSS中垂直定位具有未知高度的元素有一个简单的技巧：

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Answer 6

body {margin：0;填充：0; }

.background {background-color：＃f5f5f0;身高：100％;位置：绝对;宽度：100％; } 登录{

background-color：white;边境式：一开始;保证金：15％自动;宽度：300px; }

Answer 7

请使用主margin:auto中的div。

.maindiv{
    margin:auto
}

它将在中心完成整个div。

Answer 8

我希望这就是你要找的东西。而不是将背景应用于div，将其应用于body标签。然后将display: inline-block;添加到#login。另外，将中心对齐添加到.background以使登录表单位于中心。

.bold {
  font-weight: bold
}
#login {
  
  background-color: white;
  border-style: outset;
  margin: auto;
  margin-top: 15%;
  text-align: center;
  display: inline-block;
}
.background {
  background-color: #f5f5f0;
  height: 100%;
  width: 100%;
  text-align: center;
}

<body class="background">
  <div>
    <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>
</body>

Answer 9

首先删除背景div并将bg颜色放在body（或html）上。您可以将#login位置设置为absolute（受滚动影响）或fixed（忽略滚动）。 #login上/左计算是页面宽度减去对象宽度的一半，页面高度减去对象高度的一半。

＆＃13;

body {
  height: 100%;
  width: 100%;
  margin: 0px;
  background-color: skyblue;
  font-family: arial, sans-serif;
}

#login {
  height: 130px;
  width: 300px;  
  background-color: gold;
  outline: 2px solid black;  
  position: fixed; /* or absolute */
  top: calc(50% - 65px);
  left: calc(50% - 150px);
}

input {
  padding-left: 2px;
  padding-right: 2px;
  margin-left: 15px;
  margin-bottom: 2px;
  border: 2px solid black;  
}

input:focus {
  outline: 0;
  background: tomato;
}

::-webkit-input-placeholder {
  color: black;
}

::-moz-placeholder {
  color: black;
}

h2 {
  margin-left: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}

＆＃13;

<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>

＆＃13;

如何将Div放在具有整页背景的页面中心

9 个答案: