我有 Bootstrap3 页面，中间某处有一行显示高度。如何使行的内容垂直居中？
我已经尝试过“vertical-align:center”css 属性，但这似乎不起作用('middle' 而不是 'center' 也不起作用)。
这是一个小 live demo ，或作为独立的 HTML 示例:
<!DOCTYPE html><html><head><meta charset='utf-8'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css'>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js'></script>
<style type='text/css'>
.row { color:#ff0; }
.bg1 { background:#007; }
.bg2 { background:#060; }
.special { background:#600; height:100vh; vertical-align:center; }
</style>
</head><body>
<div class="container-fluid text-center">
<div class="row bg1">Top row<br><br></div>
<div class="row bg2">Another row<br>With some content<br><br></div>
<div class="row bg1">....Bla bla bla....<br>sadf asdf adsf asdf asdf<br><br></div>
<div class="row special">
<h2>Hello</h2>
This should be vertically centered
</div>
<div class="row bg2">And here's yet another row<br><br></div>
<div class="row bg1">The bottom row<br><br></div>
</div>
</body></html>
最佳答案
.row 的列有负边距，使用没有内部 col-X-X 会给你奇怪的结果。阅读有关如何使用网格系统的文档。
vertical-align:middle有多种方式(非居中)http://css-tricks.com/centering-in-the-unknown/
演示:http://jsfiddle.net/mLopevv8/
自述:为 .row 创建另一个类，删除 .container-fluid，将垂直对齐的中间内容的父级转换为 display:table，子级现在是 display:table-cell。
CSS
.special { background:#600; height:100vh; display:table;width:100%;}
.v-m {display:table-cell;vertical-align:middle}
HTML
<div class="text-center">
<div class="my-row bg1">Top row<br><br></div>
<div class="my-row bg2">Another row<br>With some content<br><br></div>
<div class="my-row bg1">....Bla bla bla....<br>sadf asdf adsf asdf asdf<br><br></div>
<div class="my-row special">
<div class="v-m">
<h1>Hello</h1>
This should be vertically centered!
</div>
</div>
<div class="my-row bg2">And here's yet another row<br><br></div>
<div class="my-row bg1">-- The bottom row --<br><br>
</div>
</div>
关于css - 在 Bootstrap3 行中垂直居中内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26889849/