元素实现绝对居中的三种方法

如何实现container的页面绝对居中？

为了看到效果，咱们先给container一个样式

方法一：弹性布局

第一种方法是弹性布局，父元素display为flex，子元素顺着父容器的主轴居中排列。

方法二：绝对定位，top和left固定后用margin移动元素

元素实现绝对定位后，定义top和left分别为50%，此时元素的顶部位于页面的纵向中轴，元素的左部位于横向中轴，也就是仿佛将页面均分为四块，container的左上角顶点位于正中心。
此时将元素上移和左移元素自身大小的一半，就能使元素居中。

方法三：translate进行平移

元素在页面的位置为距离顶部和左部都为50%，用translate对元素实现位置的平移，移动的大小就是自身长度和宽度的一半。

实现效果