如何将Div放置在具有整页背景的页面中心 [英] How to place Div in center of page with full page background
本文介绍了如何将Div放置在具有整页背景的页面中心的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使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屋!
查看全文