# 水平居中

# 行内元素 - 使用 text-aligin

.parent {
    text-align: center;
}

# 块级元素 - 使用 margin

# 子元素没有设置 float

.son {
    margin: 0 auto;
}

# 子元素设置了 float

.parent{
    width: fit-content;
    margin: 0 auto;
}
.son {
    float: left;
}

# 块级元素 - 使用定位

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

# 块级元素 - 使用 grid

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

# 垂直居中

# 行内元素 - line-height

.parent {
    height: 高度x;
}
.son {
    line-height: 高度x;
}

注意只对单行文本起效

# 块级元素 - table

.parent {
  display: table;
}
.son {
  display: table-cell;
  vertical-align: middle;
}

# 块级元素 - flex

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

# 块级元素 - absolute 定位

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

# 块级元素 - 使用 grid

.parent {
    display: grid;
    align-items: center;
}