Question

我有Bootstrap3页面，中途某处是一个具有完整显示高度的行。如何垂直居中行的内容？

我已经尝试了“vertical-align：center”css属性，但这似乎不起作用（“中间”而不是“中心”）。

这是一个小的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>

Answer 1

.row对列有负边距，使用不带内部col-X-X会给你带来奇怪的结果。阅读有关如何使用网格系统的文档。

vertical-align:middle（非中心）http://css-tricks.com/centering-in-the-unknown/

有多种方式

DEMO：http://jsfiddle.net/mLopevv8/

READ ME：为.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>

Answer 2

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

or

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

在Bootstrap3行中垂直居中？

2 个答案: