方法一：受垂直導航的居中對齊啟發實現此要求，具體代碼如下：
一、圖片的垂直（水平）居中
1 <div class="container"> 2 <div class="nav flex-column justify-content-center bg-light" style="height:500px;"> 3 <img src="http://www.aqzx.gov.cn/images/upfile/video/20181119115248691.jpg" width="300" height="150" class="m-auto" /> 4 </div> 5 </div>
樣式說明：
a) nav 導航基類
b) 由於要實現垂直居中，所以這里定義一個垂直導航
c) justify-content-center 類用於實現內容區域垂直居中。
d) 圖片通過類 m-auto 實現水平居中
二、文字的垂直（水平）居中
1 <div class="container"> 2 <div class="nav flex-column justify-content-center bg-light text-center text-success" style="height:500px;"> 3 <h1>正在學習bootStrap！</h1> 4 </div> 5 </div>
樣式說明：
a) nav 導航基類
b) 由於要實現垂直居中，所以這里定義一個垂直導航
c) justify-content-center 類用於實現內容區域垂直居中。
d) 文字通過類 text-center 實現水平居中
方法二：通過媒體對象的align-self-center來實現，建議使用此方法
1 <div class="media bg-primary" style="height:400px;"> 2 <img src="http://www.aqzx.gov.cn/images/upfile/video/20181119115248691.jpg" class="align-self-center mx-auto"/> 3 </div>
三、多列時垂直（水平）居中（每列的高度隨最高列的高度而變化）
1 <div class="d-flex bg-dark p-4"> 2 <div class="bg-primary text-white p-4 w-25"> 3 <div class="media h-100 bg-warning"> 4 <div class="align-self-center mx-auto bg-white text-primary"> 5 文字垂直水平居中 6 </div> 7 </div> 8 </div> 9 10 <div class="bg-success text-white p-4 w-50"> 11 <div class="media h-100 bg-warning"> 12 <div class="align-self-center mx-auto bg-white text-primary"> 13 <a href="#">這里是垂直居中的</a><br/><a href="#">這里是垂直居中的</a><br/><a href="#">這里是垂直居中的</a><br/> 14 這里是垂直居中的<br/> 15 <img src="aboud:block" width="350" height="129" ><br/> 16 這里是垂直居中的 17 </div> 18 </div> 19 </div> 20 21 <div class="bg-success text-white p-4 w-25"> 22 <div class="media h-100 bg-warning"> 23 <div class="align-self-center mx-auto bg-white text-primary"> 24 <img src="aboud:block" width="50" height="50"> 25 </div> 26 </div> 27 </div> 28 </div>
效果見下圖:
樣式說明：
1) 利於d-flex 元素高度相同，做包裹容器
2) 利於 media 樣式的 align-self-center 樣式，可實現垂直效果
四、HTML實現方式：
1 <div style="width:600px;height:600px;background:#f8f8f8; position:relative"> 2 <div style="position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;width:300px;height:200px;background:#ccc;"> 3 </div> 4 </div>