bootstrap怎么垂直居中

这篇文章主要介绍了bootstrap怎么垂直居中，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

一、图片的垂直居中

我们来看下面这段代码：

<div class="container">
  <div class="nav flex-column justify-content-center bg-light" >
    <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" >
    <h2>正在学习bootStrap！</h2>
  </div>
</div>

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

三、通过媒体对象来实现

 <div class="media bg-primary" >
 <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 样式，可实现垂直效果。

感谢你能够认真阅读完这篇文章，希望小编分享的“bootstrap怎么垂直居中”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!