如何在整頁面背景的頁面中心放置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

回答

相關問題