Bootstrap 如何实现两个元素垂直居中对齐呢？

2.33K 次浏览

在Bootstrap进行前端网页设计和开发中，现需要对两个div元素进行垂直居中对齐，示例如下：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<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>

运行结果如下：

现需要让右侧的div(Small)与左侧的div垂直居中对齐，应该如何解决这个问题呢？

我来回答收藏(0) 评论编辑

Rector

2020-03-19 提问

回复 [×]

提交评论

请输入评论内容

3 个回答

0
使用flex布局，首先定义基于flex的样式如下：

HTML布局示例如下：

运行效果如下：

评论分享

Rector

2020-03-19 回答
0
你可以自定义一个垂直居中的样式类，如下：

然后使用这个垂直居中样式，如下：

运行效果如下：

评论分享

Rector

2020-03-19 回答
0
由于Bootstrap 4默认采用的为flexbox布局，所以可以有多种不同的方式来实现垂直居中对齐，以下为使用Flexbox实现的不同高度下的垂直居中对齐：

运行效果：

评论分享

Rector

2020-03-19 回答

我来回答

提交答案