Bootstrap 4 版面區塊內容水平居中

1.單個區塊水平居中-使用【.mx-auto】

在Bootstrap 4之中，單個區塊水平居中只要在該div加上類別【.mx-auto】即可。

2.多個水平並排區塊居中-使用【.offset-X】

多個水平區塊並排居中，傳統是以offset類別來安排，安排上區塊寬度變化比較有限制，因為需要左側縮排與右側空下的空間一致，因此區塊並排變化也較少。

如範例中，二個區塊寬度均為col-sm-5，共使用了10個單位寬，只要針對左側的div加上1個單位的縮排(offset-sm-1)，右側自動剩下一個單位寬，即可達成水平居中的目的，需注意整列總寬度(含右側控下來的寬度)同樣需符合12個單位寬(區塊可任意安排單個或多個，寬度值也可自行不同搭配，唯左側縮排量與右側空下的寬度要相同)，且區塊寬度單位需一致(此範例使用sm，也可以他配其他寬度單位)。

3.多個水平並排區塊居中-使用【.justify-content-center】

justify-content-center是bootstrap 4之後才提供的新方式，大大提升編排上的方便性，就無offset的限制問題，同一列並排的區塊無論多少個，只要並排區塊寬度總和12個單位均可。

如範例中，二個區塊寬度均為col-sm-5，共使用了10個單位寬(可單個或多個區塊並排，只要並排區塊寬度總和12個單位)，請在套用row的div再加入【.justify-content-center】即可達成水平居中的目的 (此範例使用sm，也可以他配其他寬度單位)。

範例完成檔下載 有興趣了解更多Bootstrap4製作響應式網頁的技巧，可參考筆者的最新著作: 【響應式網頁設計驚嘆號：Dreamweaver CC╳Bootstrap 4╳JavaScript 範例大全】 相關課程 : 優勢多媒體 - RWD響應式網頁設計