如何在整页面背景的页面中心放置Div

我想将我的div与我的页面中心的一些登录信息对齐。它适用于静态值，但我想动态定位它。另外，背景应该覆盖整个页面，但它只是涵盖了与我的div的高度带...如何在整页面背景的页面中心放置Div

这里是我的代码：

.bold{ 
 
\t font-weight: bold 
 
} 
 

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

 
} 
 

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

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

 
\t </div> 
 
</div>

来源

2016-02-17 JohnDizzle

https://css-tricks.com/centering-css-complete-guide/，https://css-tricks.com/centering-in-the-unknown/ – CBroe

为中心的框：

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

来源

2016-02-17 12:37:43 Sprazer

所有HTML中使用的背景，身体像that

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

来源

2016-02-17 12:32:20 Microsmsm

关于居中使用这段代码http://jsfiddle.net/hashem/VsakD/8/ – Microsmsm

检查下面的代码。


 
.bold{ 
 
\t font-weight: bold 
 
} 
 

 
#login { 
 
\t width: 300px; 
 
    height: 200px; 
 
\t 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 { 
 
\t background-color: #f5f5f0; 
 
    position: absolute; 
 
    top:0; 
 
    right:0; 
 
    bottom:0; 
 
    left:0; 
 
    margin:auto 
 
}

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

 
\t </div> 
 
</div>

来源

2016-02-17 12:36:36

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

来源

2016-02-17 12:37:16 SuperComupter

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

.parent { 
    position: relative; 
} 

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

来源

2016-02-17 12:37:48

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

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

background-color：white;边界式：开始;保证金：15％汽车;宽度：300px; }

来源

2016-02-17 12:38:17 Barjinder

@JohnDizzle用这个替换你的整个CSS，这将狡猾地解决你的问题。 – Barjinder

请在主div中使用margin:auto。

.maindiv{ 
    margin:auto 
}

它会在中心做整个div。

来源

2016-02-17 12:39:22 nikunj

我希望这是你在找什么。不要将背景应用于div，请将其应用于身体标记。然后将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>

来源

2016-02-17 12:39:59 niyasc

首先去除背景的div和让身体上（或HTML）的背景颜色。您可以将#login位置设置为absolute（受滚动影响）或fixed（忽略滚动）。#login顶部/左边的计算是页面宽度减去对象宽度的一半，页面高度减去对象高度的一半。

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

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

来源

2016-02-17 13:16:18

如何在整页面背景的页面中心放置Div

回答

相关问题