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

單個或多個並排區塊寬度總和未滿一列12個單位寬時，就需要設定安排區塊水平居中的狀態，【.text-center】是讓區塊內的圖文內容水平居中於區塊內，而區塊的水平居中安排分為單個與多個並排二種狀態，設定與安排也有所不同。

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

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

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

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響應式網頁設計