居中

@Center

焦点

水平居中

垂直居中

水平垂直居中

所有的对齐和分布，都要求容器显式的指定大小，不能由子项撑开

水平居中 text-algin

适合行内元素 inline 或行内块元素 inline-block 在容器内的水平居中

行内元素默认是左对齐 left

.container{
  text-algin: center;
}

水平居中 margin

适合块元素 block 在容器内的水平居中，如版心在页面水平居中

.item{
  width: 1024px;
  margin: 0 auto;
}

垂直居中 line-height

适合单行文本垂直居中

指定高度 height 和行高 line-height相同或仅仅指定行高

.title{
  height: 100px;
  line-height: 100px;
}

水平垂直居中 position

使用定位 position 和变换 transform 实现

可以是单个元素在容器内的水平垂直居中，也可以是多个元素的重叠居中

.container{
  position: relative;
}

.item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  // translate: -50% -50%;
}

水平垂直居中 flex

适合单个元素在容器内的水平垂直居中

方案1 - 只操作容器

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

方案2 - 同时操作容器和子项；子项利用了 margin: auto; 的特点

.container {
  display: flex;
  height: 100vh;
}

.item {
  margin: auto;
}

水平垂直居中 grid

适合单个元素在容器内的水平垂直居中

方案1 - 只操作容器

.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

方案2 - 同时操作容器和子项；子项利用了 margin: auto; 的特点

.container {
  display: grid;
  height: 100vh;
}

.item {
  margin: auto;
}

多个元素重叠

父元素 - 弹性盒子且相对定位

子元素 - 绝对定位；脱离文档流即可

main {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

main span {
  position: absolute;
}

或使用定位和变换实现，参照前面的案例