当前位置: 首页 > Web前端 > CSS

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

时间:2023-03-31 00:45:33 CSS

容器的页面如何实现绝对居中?为了看到效果,我们先给容器一个样式。方法一:弹性布局第一种方法是弹性布局。父元素的显示是flex,子元素沿父容器的主轴居中排列。方法二:绝对定位,固定top和left后,使用margin移动元素。元素绝对定位后,分别定义top和left为50%。此时元素的顶部位于页面的纵轴上,元素的左边部分位于横轴上,也就是好像页面被分成了四个部分,容器的左上角位于中间。此时,将元素向上和向左移动元素本身大小的一半将使元素居中。方法3:Translate将元素在页面上的位置从顶部和左侧平移到50%。使用translate平移元素的位置,移动的大小是自身长宽的一半。达到效果