在前端的学习中我们可以选择的框架是比较多的，我们可以根据不同项目的特点来进行选择适合的框架，那么今天我们就来说说有关于：“bootstrap如何垂直居中？”的这个问题吧！下面是小编收集整理的相关资料希望对大家有所帮助。

一、图片的垂直居中我们来看下面这段代码：

<div class="container"><div class="nav flex-column justify-content-center bg-light" style="height:500px;"><img src="img/00.jpg" width="300" height="150" class="m-auto" /></div>
</div>

代码中的nav 是导航基类， 由于我们要实现垂直居中，所以需要在这里定义一个垂直导航 ， 对于​justify-content-center​ 类用于实现内容区域垂直居中，图片可以通过类 ​m-auto​ 实现水平居中 。

二、文字的垂直居中我们来看下面这段用来实现文字居中的代码：

<div class="container"><div class="nav flex-column justify-content-center bg-light text-center text-success" style="height:500px;"><h1>正在学习bootStrap！</h1></div>
</div>

我们可以指代在代码中也是类似我们的图片居中的做法， 使用nav 导航基类，在进行定义一个垂直导航，从而实现垂直居中的效果，文字通过类 ​text-center ​实现水平居中。

三、通过媒体对象来实现

 <div class="media bg-primary" style="height:400px;"><img src="http://www.aqzx.gov.cn/images/upfile/video/20181119115248691.jpg" class="align-self-center mx-auto"/></div>

我们通过这串代码可以实现我们需要的居中效果。

四、多列时垂直居中我们先看下相关的代码：

<div class="d-flex bg-dark p-4">
  <div class="bg-primary text-white p-4 w-25"><div class="media h-100 bg-warning"><div class="align-self-center mx-auto bg-white text-primary">
        文字垂直水平居中
      </div></div></div><div class="bg-success text-white p-4  w-50"><div class="media h-100 bg-warning"><div class="align-self-center mx-auto bg-white text-primary"><a href="#">这里是垂直居中的</a><br/><a href="#">这里是垂直居中的</a><br/><a href="#">这里是垂直居中的</a><br/>
        这里是垂直居中的<br/><img src="aboud:block" width="350" height="129" ><br/>
        这里是垂直居中的
      </div></div></div><div class="bg-success text-white p-4  w-25"><div class="media h-100 bg-warning"><div class="align-self-center mx-auto bg-white text-primary"><img src="aboud:block" width="50" height="50"></div></div></div>
</div>

在代码中我们写了三个盒子样式，按照正常的盒子排放顺序我们会看到盒子是呈现靠左形成一列的效果，当我们加上样式和其他的设置的时候就会呈现出并排成一行然后垂直居中的样式，我们在代码中还运用到​d-flex​元素高度相同做成包裹容器，之后在利用​media​ 样式的 ​align-self-center ​样式，可实现垂直效果。