我使用Twitter Bootstrap 3，当我想垂直对齐两个div时，我有问题，例如- JSFiddle链接:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-5">
<div style="height:5em;border:1px solid #000">Big</div>
</div>
<div class="col-xs-5">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
Bootstrap中的网格系统使用float: left，而不是display:inline-block，因此属性vertical-align不起作用。我尝试使用margin-top来修复它，但我认为这不是响应式设计的一个很好的解决方案。
我想我应该分享我的“解决方案”，以防它能帮助那些不熟悉@media查询的人。
感谢@HashemQolami的回答，我构建了一些媒体查询，可以像col-*类一样向上移动，这样我就可以在移动中堆叠col-*，但在更大的屏幕中垂直对齐地显示它们。
<div class='row row-sm-flex-center'>
<div class='col-xs-12 col-sm-6'></div>
<div class='col-xs-12 col-sm-6'></div>
</div>
.
.row-xs-flex-center {
display:flex;
align-items:center;
}
@media ( min-width:768px ) {
.row-sm-flex-center {
display:flex;
align-items:center;
}
}
@media ( min-width: 992px ) {
.row-md-flex-center {
display:flex;
align-items:center;
}
}
@media ( min-width: 1200px ) {
.row-lg-flex-center {
display:flex;
align-items:center;
}
}
更复杂的布局要求每个屏幕分辨率的列数不同(例如-xs为2行，-sm为3行，-md为4行，等等)将需要一些更高级的欺骗，但对于一个简单的页面，-xs堆叠，-sm和更大的行，这很好。
我也遇到了同样的问题。在我的情况下，我不知道外容器的高度，但这是我如何固定它:
首先设置html和body元素的高度，使它们为100%。这很重要!如果没有这一点，html和body元素将简单地继承它们的子元素的高度。
html, body {
height: 100%;
}
然后我有一个外部容器类:
.container {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
}
最后是带class的内部容器:
.inner-container {
display: table-cell;
vertical-align: middle;
}
HTML非常简单:
<body>
<div class="container">
<div class="inner-container">
<p>Vertically Aligned</p>
</div>
</div>
</body>
这就是垂直对齐内容所需要的全部内容。看看小提琴:
杰斯菲德尔
