使用邊距在頁面上水平居中元素

只要元素是一個,並且它具有明確設定的寬度值,就可以使用邊距水平地居中頁面上的塊元素。

我們新增一個低於視窗寬度的寬度值和 margin 的 auto 屬性然後將剩餘空間分配到左側和右側:

#myDiv {
 width:80%;
 margin:0 auto;
}

在上面的例子中,我們使用簡寫 margin 宣告來首先將 0 設定為頂部和底部邊距值(儘管這可以是任何值),然後我們使用 auto 讓瀏覽器自動將空間分配給左右邊距值。

在上面的示例中,#myDiv 元素設定為 80%寬度,留下使用 20%剩餘。瀏覽器將此值分配給剩餘的邊,因此:

(100% - 80%)/ 2 = 10%