Bootstrap中的垂直對齊響應容器

Question

我正在嘗試將巨型div中的容器div垂直對齊。

因為容器的高度（也就是超大號容器）的高度是可變的，所以top: 50%; margin-top: -'height * 0.5' top: 50%; margin-top: -'height * 0.5'無效。

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'); .banner { padding: 48px 0px 48px 0px; text-align: center; } .banner:after { content: ""; display: block; padding-top: 12.5%; } .container { background: red !important; /* For testing vertical alignment */ } 

 <header class="jumbotron banner"> <div class="container"> <h1>Title</h1> <p>Subtitle</p> <p> <a class="btn btn-lg btn-primary" href="#" role="button">Button</a> </p> </div> </header> 

Answer 1

您應該使用填充居中，這是默認的設置方式 ；

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'); .banner { padding: 5% 0px; text-align: center; } .banner:after { content: ""; display: block; } .container { background: red !important; /* For testing vertical alignment */ } 

 <header class="jumbotron banner"> <div class="container"> <h1>Title</h1> <p>Subtitle</p> <p> <a class="btn btn-lg btn-primary" href="#" role="button">Button</a> </p> </div> </header> 

Answer 2

要使div垂直居中對齊，可以使用CSS

position: relative;
top: 50%;
transform: translatey(-50%);

前

 .outer{ height:100px; background:gray; } .inner{ background:green; position:relative; top:50%; transform:translatey(-50%); } 

 <div class="outer"> <div class="inner" > <p>sample text</p> </div> </div> 

Answer 3

有幾種方法可以使內容垂直對齊。 我在這里發布了一個常見的最新技巧。

1. 給予position: relative; 到父元素。

2. 給孩子：

   .child-element {位置：絕對； 最高：50％； 左：50％； 轉換：translate（-50％，-50％）; }

如果需要進一步的幫助，請參見JSFIDDLE並在下面發表評論。