Published Apr 11

绝对居中

绝对居中 = 水平居中 + 垂直居中

利用 margin

  1. 父元素标记 position: relative

  2. 子元素指定 position: absolute; inset: 0; margin: auto;

利用 transform

  1. 父元素标记 position: relative

  2. 子元素指定 position: absolute; top: 50%; left: 50; transform: translate(-50%, -50%);

原理:top 和 left 的 50% 是相对于包含块(即父元素)的尺寸的,而 transform 里面的百分比是相对于元素本身的尺寸的

利用 place-center

父元素标记 display: grid; place-content: center;

Related content