将我的元素切换为“位置：绝对”可防止其占用全宽

Question

当我的容器div设置为display: block和position: static时，登录页面的外观和行为是我希望的。 但是，当它变为display: inline-block 或 position: absolute ，它将停止占用其500px的最大宽度。 我想使用绝对位置将div垂直和水平居中，因此我需要布局保持与静态位置时的外观相同。 我该如何实现？

 * { -moz-box-sizing: border-box !important; -webkit-box-sizing: border-box !important; box-sizing: border-box !important; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } #login-box { max-width: 500px; min-width: 300px; box-shadow: #bbb 0 0 20px 0; display: block; position: static; /*position: absolute;*/ } #HeaderForLoginForm { background-image: url('https://dummyimage.com/600x106/333333/fff.png&text=SOME+LOGO'); background-repeat: no-repeat; background-size: 200px; background-position-x: center; background-position-y: 25px; background-color: #000; height: 110px; text-align: center; line-height: 56px; } #headerlinks { color: rgb(90, 90, 90); font-weight: bold; font-size: 12px; margin-top: 54px; display: inline-block; } @media (min-width: 450px) { #HeaderForLoginForm { background-position-x: 25px; background-position-y: center; text-align: right; height: 95px; line-height: 95px; } #headerlinks { margin-right: 20px; margin-top: 0; } } #DivForLoginForm { background: #b7d9ff; background: -webkit-linear-gradient(#b7d9ff, #fff); background: -o-linear-gradient(#b7d9ff, #fff); background: -moz-linear-gradient(#b7d9ff, #fff); background: linear-gradient(#b7d9ff, #fff); text-align: center; } #LoginForm { display: inline-block; width: 74%; margin-top: 20px; margin-bottom: 40px; } #LoginForm input.textField { display: inline-block; width: 100%; padding: 10px; margin-top: 18px; font-size: 14px; border-radius: 3px; border: 1px solid #999; } #terms-wrapper { margin-top: 16px; margin-bottom: 30px; text-align: left; font-size: 14px; font-weight: bold; } #terms-wrapper input { margin-left: 0; vertical-align: -2px; } a[href] { color: #0079dd; text-decoration: none; } a[href]:hover { text-decoration: underline; } input#btn-login { padding: 14px; height: auto; width: 40%; min-width: 100px; float: right; background-color: #1064d8; color: #fff; font-weight: bold; font-size: 16px; outline: none !important; border: none; border-radius: 3px; cursor: pointer; } input#btn-login:hover { background-color: #004BBF; } input#btn-login:active { background-color: #0031A5; } #loginfooter { background-image: url("http://images.naldzgraphics.net/2014/08/20-brushed-seamless-texture.jpg"); color: rgb(100, 100, 100); padding: 12px; font-size: 11px; } [data-val-required] { background-color: #fff; } 

 <section id="login-box-wrapper"> <div id="login-box"> <header id="HeaderForLoginForm"> <div id="headerlinks"> <a href="#">some link</a> | <a href="#">some other link</a> </div> </header> <div id="DivForLoginForm"> <form method="post" id="LoginForm"> <input class="textField" id="UserName" name="UserName" placeholder="Username" type="text"> <input class="textField" id="Password" name="Password" placeholder="Password" type="password"> <div id="terms-wrapper"> <input id="HasAcceptedTermsConditions" name="HasAcceptedTermsConditions" type="checkbox"> <label for="HasAcceptedTermsConditions"> I agree to the <a id="terms-link" href="#" target="_blank">General Terms of Service</a> </label> </div> <input id="btn-login" type="submit" value="LOG IN"> </form> </div> <footer id="loginfooter" style="text-align: center;"> <span>© 2009-2017 Some Company, LLC — All rights reserved</span> </footer> </div> </section> 

Answer 1

添加width: 100%; 转到#login-box以使其占用max-width规则。

使用position: absolute; 与top ， left和transform与translate功能，水平和垂直居中登录框。

#login-box {
    width: 100%;
    max-width: 500px;
    min-width: 300px;
    box-shadow: #bbb 0 0 20px 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
}

 * { -moz-box-sizing: border-box !important; -webkit-box-sizing: border-box !important; box-sizing: border-box !important; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } #login-box { width: 100%; max-width: 500px; min-width: 300px; box-shadow: #bbb 0 0 20px 0; position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50% ); } #HeaderForLoginForm { background-image: url('https://dummyimage.com/600x106/333333/fff.png&text=SOME+LOGO'); background-repeat: no-repeat; background-size: 200px; background-position-x: center; background-position-y: 25px; background-color: #000; height: 110px; text-align: center; line-height: 56px; } #headerlinks { color: rgb(90, 90, 90); font-weight: bold; font-size: 12px; margin-top: 54px; display: inline-block; } @media (min-width: 450px) { #HeaderForLoginForm { background-position-x: 25px; background-position-y: center; text-align: right; height: 95px; line-height: 95px; } #headerlinks { margin-right: 20px; margin-top: 0; } } #DivForLoginForm { background: #b7d9ff; background: -webkit-linear-gradient(#b7d9ff, #fff); background: -o-linear-gradient(#b7d9ff, #fff); background: -moz-linear-gradient(#b7d9ff, #fff); background: linear-gradient(#b7d9ff, #fff); text-align: center; } #LoginForm { display: inline-block; width: 74%; margin-top: 20px; margin-bottom: 40px; } #LoginForm input.textField { display: inline-block; width: 100%; padding: 10px; margin-top: 18px; font-size: 14px; border-radius: 3px; border: 1px solid #999; } #terms-wrapper { margin-top: 16px; margin-bottom: 30px; text-align: left; font-size: 14px; font-weight: bold; } #terms-wrapper input { margin-left: 0; vertical-align: -2px; } a[href] { color: #0079dd; text-decoration: none; } a[href]:hover { text-decoration: underline; } input#btn-login { padding: 14px; height: auto; width: 40%; min-width: 100px; float: right; background-color: #1064d8; color: #fff; font-weight: bold; font-size: 16px; outline: none !important; border: none; border-radius: 3px; cursor: pointer; } input#btn-login:hover { background-color: #004BBF; } input#btn-login:active { background-color: #0031A5; } #loginfooter { background-image: url("http://images.naldzgraphics.net/2014/08/20-brushed-seamless-texture.jpg"); color: rgb(100, 100, 100); padding: 12px; font-size: 11px; } [data-val-required] { background-color: #fff; } 

 <section id="login-box-wrapper"> <div id="login-box"> <header id="HeaderForLoginForm"> <div id="headerlinks"> <a href="#">some link</a> | <a href="#">some other link</a> </div> </header> <div id="DivForLoginForm"> <form method="post" id="LoginForm"> <input class="textField" id="UserName" name="UserName" placeholder="Username" type="text"> <input class="textField" id="Password" name="Password" placeholder="Password" type="password"> <div id="terms-wrapper"> <input id="HasAcceptedTermsConditions" name="HasAcceptedTermsConditions" type="checkbox"> <label for="HasAcceptedTermsConditions"> I agree to the <a id="terms-link" href="#" target="_blank">General Terms of Service</a> </label> </div> <input id="btn-login" type="submit" value="LOG IN"> </form> </div> <footer id="loginfooter" style="text-align: center;"> <span>© 2009-2017 Some Company, LLC — All rights reserved</span> </footer> </div> </section> 

Answer 2

使用width: 100%时要当心width: 100%从文档正常流程中删除的元素要width: 100% 。

使用right: 0而不是width: 100%出于一致性考虑，最好使用width: 100% ，这取决于在这些元素中使用边距时所期望的结果。

使用width: 100% 。

 div { height: 20vh; border: .2em solid violet; box-sizing: border-box; } .relative { position: relative; } .absolute { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-color: dodgerblue; margin: .5em; } 

 <div class="relative"> <div class="absolute"></div> </div> 

使用right: 0 。

 div { height: 20vh; border: .2em solid violet; box-sizing: border-box; } .relative { position: relative; } .absolute { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-color: dodgerblue; margin: .5em; } 

 <div class="relative"> <div class="absolute"></div> </div>