Bootstrap：如何使元素垂直居中
[英]Bootstrap: How to center vertically an element
問題描述
我正在做一個網站，該網站大部分會顯示在手機上。 我正在使用引導程序4。
目前，我正在嘗試顯示必須在可用空間中“垂直”居中的元素。
我的意思是：我有一個標題，使用固定的大小，並且在div中有一個消息+ 2按鈕，我需要在可用空間的垂直中間顯示它（不溢出）。
我發現了這一點： 與Bootstrap 3垂直對齊 -> bootstrap 4代碼段不起作用另一個關於柔韌性盒的答案很有希望，但是似乎如果我只有一個組件應該使用所有剩余空間，那不起作用。
還有，一件事； 我需要垂直對齊的元素通過jquery調用顯示：
$('#btToShow').click(function(){ $('#card-container').fadeOut(200, function(){$('#wait-for-result-container').fadeIn();}); }); $('#change-choice').click(function(){ $('#wait-for-result-container').fadeOut(200, function(){$('#card-container').fadeIn();}); });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Some page</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> </head> <body> <H1 class="text-center page-header">Somelist</H1> <div id="card-container" class="container show center-block"> <div id="card-subcontainer" class="row center-block"> <!-- Here there is normally a lot of buttons --> <button class="btn" id="btToShow">Show</button> </div> </div> <div id="wait-for-result-container" class="container center-block text-center m-7" style="display: none;"> <h2>This is the part that is absolutely not vertically aligned</h2> <div> <button class="btn btn-primary btn-lg">Wait for it...</button> <button id="change-choice" class="btn btn-danger">Change the choice</button> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.2.0/js/mdb.min.js" crossorigin="anonymous"></script>--> </body> </html>
知道如何將#wait-for-result-container在中間垂直對齊嗎？
3 個解決方案
解決方案1
2 2017-01-23 19:06:13
您可以使用flexbox將內容垂直居中
#wait-for-result-container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
淡入display: flex
$("#wait-for-result-container")
.css("display", "flex")
.hide()
.fadeIn();
解決方案2
1 2017-01-23 19:45:02
您可以絕對定位它：
#wait-for-result-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
$('#btToShow').click(function(){ $('#card-container').fadeOut(200, function(){$('#wait-for-result-container').fadeIn();}); }); $('#change-choice').click(function(){ $('#wait-for-result-container').fadeOut(200, function(){$('#card-container').fadeIn();}); });
#wait-for-result-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Some page</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> </head> <body> <H1 class="text-center page-header">Somelist</H1> <div id="card-container" class="container show center-block"> <div id="card-subcontainer" class="row center-block"> <!-- Here there is normally a lot of buttons --> <button class="btn" id="btToShow">Show</button> </div> </div> <div id="wait-for-result-container" class="container center-block text-center m-7" style="display: none;"> <h2>This is the part that is absolutely not vertically aligned</h2> <div> <button class="btn btn-primary btn-lg">Wait for it...</button> <button id="change-choice" class="btn btn-danger">Change the choice</button> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.2.0/js/mdb.min.js" crossorigin="anonymous"></script>--> </body> </html>
解決方案3
1 已采納 2017-01-23 21:00:27
此方法對於Bootstrap 3.x確實有效：
#wait-for-result-container {
position:absolute;
left:0;
right:0;
top:50%;
-webkit-transform:translateY(-50%) !important;
-ms-transform:translateY(-50%) !important;
transform:translateY(-50%) !important;
}
top:50%將div的位置向下設置到容器的1/2處，然后transform:translateY(-50%)將其向后移動一半距離，從而使對象相對於父容器垂直居中。
如何在Bootstrap中垂直居中放置高度未知的浮動元素？
[英]How to vertically center a floating element of unknown height in Bootstrap?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.