如何在Bootstrap中垂直對齊div到center？
[英]How to vertically align div to center in Bootstrap?
問題描述
body { background-color: #ecf0f1; } .sign-box { position: relative; padding: 20px; padding-bottom: 20px; border: 1px solid #bdc3c7; border-radius: 4px; background-color: white; } .input-box { padding: 10px 10px 20px 10px; border: 0px; border-bottom: 2px solid #606060; width: 100%; font-size: 14px; font-weight: 600 !important; color: #606060; } .input-box:focus { color: #9b59b6; border-bottom: 2px solid #9b59b6; } .submit-btn { margin-top: 20px; padding: 12px 10px 12px 10px; font-weight: 600; font-size: 14px; letter-spacing: 2px; border: 1px solid #8e44ad; border-radius: 40px; width: 100%; color: white; background-color: #9b59b6; transition: all 0.25s ease-in-out; } .submit-btn:hover { color: white; background-color: #8e44ad; box-shadow: 0 6px 16px rgba(145, 92, 182, .4); } .h2-form { margin-bottom: 20px; font-weight: bold; letter-spacing: 1px; color: #606060; } .col-centered { float: none; margin: 0 auto; }
<!DOCTYPE html> <html lang="en"> <head> <title>sfs!</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="main.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-6 col-centered sign-box"> <h2 class="h2-form">Sign in!</h2> <form> <div class="form-group"> <input class="input-box" type="email" class="form-control" id="email" placeholder="Email address"> </div> <div class="form-group"> <input class="input-box" type="password" class="form-control" id="pwd" placeholder="Password"> </div> <button type="submit" class="submit-btn">SIGN IN</button> </form> </div> </div> </div> </body> </html>
我需要它垂直對齊到網頁的中心。 我已登錄並注冊網頁，類似於我提供的網頁，我需要兩者准確對齊網頁的中心而不會看起來很奇怪。
4 個解決方案
解決方案1
0 2017-06-17 15:59:50
您可以將以下代碼應用於具有“容器”類的div：
position: relative;
top: 50%;
transform: translateY(-50%);
這會將頂部形狀精確地移動到屏幕中間，然后將其向上移動，其價值恰好是其高度的50％。
解決方案2
0 2017-06-17 16:01:33
以.col為中心的高度並使用此CSS
.col-centered {
float: none;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
position: fixed;
max-height:350px;
}
希望這可以幫助...
解決方案3
0 2017-06-17 16:14:01
而flexbox也會這樣做：
.container {
display: flex;
align-items: center;
}
解決方案4
0 2017-06-17 17:20:37
You can benefit of the display table and table-cell box model algorithm
html,body {
height : 100%;
}
.table {
display: table;
height: 100%;
margin: 0;
}
.table__cell {
display: table-cell;
vertical-align: middle;
}
<div class="table">
<div class="table__cell">
your markup
</div>
</div>
[Result][1]
[1]: https://i.stack.imgur.com/QKJKK.png
如何在bootstrap中垂直對齊div中心？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.