一、Flexbox 實(shí)現(xiàn) Bootstrap 垂直居中
Bootstrap 的 flexbox 工具類可以讓我們很方便地實(shí)現(xiàn)垂直居中，具體步驟如下：
這是居中的文字
實(shí)現(xiàn)方式很簡(jiǎn)單，直接在外層
其中，d-flex 代表容器為 flex 布局；align-items-center 代表垂直方向上子元素居中對(duì)齊；justify-content-center 代表水平方向上子元素居中對(duì)齊。
除此之外，Bootstrap 還提供了許多與 flexbox 相關(guān)的工具類，例如柵格系統(tǒng)中的與 flexbox 結(jié)合使用的類名：justify-content-{breakpoint}-{value} 和 align-items-{breakpoint}-{value}。使用這些工具類可以輕松地實(shí)現(xiàn)各種垂直居中效果。
二、Table元素
除了使用 flexbox，我們還可以使用 table 元素來(lái)實(shí)現(xiàn)垂直居中，具體步驟如下：
這是居中的文字
其中，d-table 代表外層元素為 table 布局；d-table-cell 代表單元格；align-middle 代表單元格垂直居中對(duì)齊。
需要注意的是，這種方法雖然可行，但并不推薦使用。因?yàn)?table 元素不適合用于布局，會(huì)影響語(yǔ)義結(jié)構(gòu)。
三、Translate + Position
如果你不想使用 flexbox 或者 table 元素來(lái)實(shí)現(xiàn)垂直居中，還可以使用 translate 和 position 屬性來(lái)實(shí)現(xiàn)。具體步驟如下：
這是居中的文字
其中，position-relative 代表相對(duì)定位，是為了讓它的直屬子元素 position-absolute 具有參照物；position-absolute 代表絕對(duì)定位；top-50 和 start-50 分別代表上下左右都為50%的距離；translate-middle 代表偏移的距離，為元素自身寬度和高度的一半。
需要注意的是，這種方法雖然可行，但是需要將每個(gè)要實(shí)現(xiàn)垂直居中的元素的父元素都設(shè)置為 position-relative，如果場(chǎng)景過(guò)于復(fù)雜，會(huì)影響代碼的可讀性。
四、垂直居中網(wǎng)格系統(tǒng)
Bootstrap 推薦的方式是使用垂直居中網(wǎng)格系統(tǒng)。
具體步驟如下：
這是居中的文字
其中，row align-items-center 中的 align-items-center 表示水平居中對(duì)齊，這個(gè)只針對(duì)單行元素有效，如果是多行元素，就需要再加上 text-center 的 class 來(lái)實(shí)現(xiàn)居中。
五、總結(jié)
通過(guò)以上幾種方式，我們可以輕松地實(shí)現(xiàn) Bootstrap 的垂直居中效果，其中以 flexbox 和垂直居中網(wǎng)格系統(tǒng)最為推薦。當(dāng)然，對(duì)于場(chǎng)景比較特殊的情況，我們還可以使用其他方式來(lái)實(shí)現(xiàn)垂直居中。
京公網(wǎng)安備 11010802030320號(hào)