元素實現絕對居中的三種方法

如何實現container的頁面絕對居中？

爲了看到效果，咱們先給container一個樣式

方法一：彈性佈局

第一種方法是彈性佈局，父元素display爲flex，子元素順着父容器的主軸居中排列。

方法二：絕對定位，top和left固定後用margin移動元素

元素實現絕對定位後，定義top和left分別爲50%，此時元素的頂部位於頁面的縱向中軸，元素的左部位於橫向中軸，也就是彷彿將頁面均分爲四塊，container的左上角頂點位於正中心。
此時將元素上移和左移元素自身大小的一半，就能使元素居中。

方法三：translate進行平移

元素在頁面的位置爲距離頂部和左部都爲50%，用translate對元素實現位置的平移，移動的大小就是自身長度和寬度的一半。

實現效果