Bootstrap3 行中的内容垂直居中？答案

【问题标题】：Vertically center content in a Bootstrap3 row?Bootstrap3 行中的内容垂直居中？
【发布时间】：2015-01-09 11:23:58
【问题描述】：

我有 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>

【问题讨论】：

多亏了两者，表格解决方案实际上运行良好！

标签： css twitter-bootstrap twitter-bootstrap-3 row vertical-alignment

【解决方案1】：

.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>

【讨论】：

【解决方案2】：

一种方法是为要放置在垂直和水平中心的文本指定行高，但行高应等于放置它的 div 高度的一半。

or

您可以查看此链接，这可能会对您有所帮助： http://jsfiddle.net/jasongennaro/unfwL/1/

【讨论】：

谢谢，但要居中的内容包含一个小段落（也可能包含换行符或换行符本身），可能还有一个图像或更多。因此，更改行高以强制居中通常也会影响内容本身......？至于另一个例子：它使用表格显示，不幸的是在我的情况下并不是很方便（它影响了它的显示方式）。