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 是導(dǎo)航基類， 由于我們要實現(xiàn)垂直居中，所以需要在這里定義一個垂直導(dǎo)航 ， 對于justify-content-center 類用于實現(xiàn)內(nèi)容區(qū)域垂直居中，圖片可以通過類 m-auto 實現(xiàn)水平居中 。

二、文字的垂直居中

我們來看下面這段用來實現(xiàn)文字居中的代碼：

<div class="container">
  <div class="nav flex-column justify-content-center bg-light text-center text-success" >
    <h2>正在學(xué)習(xí)bootStrap！</h2>
  </div>
</div>

我們可以指代在代碼中也是類似我們的圖片居中的做法， 使用nav 導(dǎo)航基類，在進(jìn)行定義一個垂直導(dǎo)航，從而實現(xiàn)垂直居中的效果，文字通過類 text-center 實現(xiàn)水平居中。

三、通過媒體對象來實現(xiàn)

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

我們通過這串代碼可以實現(xiàn)我們需要的居中效果。

四、多列時垂直居中

我們先看下相關(guān)的代碼：

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

在代碼中我們寫了三個盒子樣式，按照正常的盒子排放順序我們會看到盒子是呈現(xiàn)靠左形成一列的效果，當(dāng)我們加上樣式和其他的設(shè)置的時候就會呈現(xiàn)出并排成一行然后垂直居中的樣式，我們在代碼中還運(yùn)用到d-flex元素高度相同做成包裹容器，之后在利用media 樣式的 align-self-center 樣式，可實現(xiàn)垂直效果。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“bootstrap怎么垂直居中”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!