bootstrap如何垂直居中？垂直居中技巧分享！

在前端的學(xué)習(xí)中我們可以選擇的框架是比較多的，我們可以根據(jù)不同項目的特點來進(jìn)行選擇適合的框架，那么今天我們就來說說有關(guān)于：“bootstrap如何垂直居中？”的這個問題吧！下面是小編收集整理的相關(guān)資料希望對大家有所幫助。

我們來看下面這段代碼：

<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 是導(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" style="height:500px;">
    <h1>正在學(xué)習(xí)bootStrap！</h1>
  </div>
</div>

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

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

我們通過這串代碼可以實現(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)出并排成一行然后垂直居中的樣式，我們在代碼中還運用到?d-flex?元素高度相同做成包裹容器，之后在利用?media? 樣式的 ?align-self-center ?樣式，可實現(xiàn)垂直效果。

以上就是今天分享的有關(guān)于：“bootstrap如何垂直居中？”的相關(guān)內(nèi)容，如果你有更好的方式和方法也可以和大家分享探討，更多有關(guān)于bootstrap的相關(guān)內(nèi)容我們都可以在W3cschool中進(jìn)行搜查了解。