元素水平、垂直居中

[juzhiyuan]

• CSS 常用布局 #35 (comment)

固定宽高、绝对定位元素

.element {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;

  // 高度一半
  margin-top: -50px;
  // 宽度一半
  margin-left: -50px;
}

缺点

• 需要知道元素宽高，否则无法精确调整**margin值（可通过 JS 获取）

固定宽高、绝对定位元素

.element {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;

  // 50% 为自身尺寸一半
  transform: translate(-50%. -50%);
}

• transform 偏移的百分比值是相对自身大小的

margin: auto

.element {
  width: 100px;
  height: 100px;
  position: absolute;

  left: 50%;
  top: 50%;
  right: 0;
  bottom: 0;
  margin: auto;
}

注意

• 上下左右均0位置定位
• margin: auto
• 可以不设置尺寸（需要是图片这种自身包含尺寸的元素）

Flex

<div class="container">
  <div class="box">一些元素</div>
</div>

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

行内元素

父级元素设置text-aligin: center;即可

Grid

.container {
  display: grid;
  grid-template-columns: 50px;
  justify-content: center;
}