丸子学CSS （最全居中指南）

前言

学习有什么捷径吗？ 没有，不过就是枯燥乏味的重复，重复，再重复，然后积累到一定程度，自然就水到渠成

水平居中

内联元素

通过使用text-align实现，运用在块级元素中的text-align会使其包含的内联元素水平对齐

<div class="container">
    <span class="content">水平居中</span>
</div>
.container {
  text-align: center;
}

块级元素

块级元素要实现水平居中可以通过是用margin实现，块级元素宽度和高度已知，可以通过将元素的左右margin设置为auto

  <div class="container">
    <div class="content">水平居中</div>
  </div>
.content {
      margin: auto;
}

通用

Flex布局

在 Flex 布局中，justify-content可以用于设置弹性盒子元素在主轴方向上的对齐方式。当其属性值为 center 时，其子元素整体会在主轴的中心位置

.contanier {
      display: flex;
      justify-content: center;
}

Grid布局

在 Grid 布局中，justify-content 属性会沿着行轴线（水平方向） 在网格容器中对齐网格。当属性值为center时，就可以将网格对齐到网格容器的水平居中位置

.contanier {
      display: grid;
      justify-content: center;
}

绝对定位

可以通过将使用绝对定位和变换实现元素的水平居中

.container {
  position: relative;
}
.content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

如果块元素的宽度已知，也可以使用负边距来代替transform

.container {
  position: relative;
}
.content {
  width: 100px;
  position: absolute;
  left: 50%;
  margin-left: -50px;
}

垂直居中

块级元素

不定宽高元素，可以通过使用绝对定位和变换实现元素的垂直居中

.container {
  position: relative;
}
.content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

如果块元素的高度已知，可以使用负边距来替代 transform

.container {
  position: relative;
}
.content {
  height: 100px;
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

通用

Flex 布局

在 Flex 布局中，align-items 属性用来定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。当其属性值为 center 时，元素位于容器的中心。

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

Grid布局

使用 CSS Grid 布局中，可以使用 align-content 属性将项目垂直居中到其网格区域

.container {
  display: grid;
  align-content: center;
}

水平垂直居中

使元素垂直居中最通用的方法就是使用绝对定位和transform

.container {
  position: relative;
}

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

如果元素的高度和宽度已知，也可以使用margin来代替transform

.container {
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

Flex布局

在使用 Flex 布局时，可以结合上面的水平和垂直居中来实现水平垂直居中

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

Grid布局

在 Grid 布局中，可以使用以下形式来实现元素的水平垂直居中

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