水平方向

1. 内联元素

给父级块元素添加

.parent {
    text-align:center;
 }

适用于inline、inline-block、inline-table、inline-flex...

2. 块级元素

给自身加左右自适应的margin值

.self {
    margin: xx auto; 
    width: 200px; /* 设置width/max-width */
}

fit-content搭配margin实现水平居中

.self { 
    width: fit-content;
    margin: auto;
}

3. 多个块元素

当两个或多个块级元素需要在一行中水平居中，需要修改元素display,inline-block、flex等

---

垂直方向

1. 内联元素

• 单行文本

固定填充上下padding值

.single-line { 
    padding: 30px xx; 
}

让line-height大小等于元素高度

.single-line { 
    height: 100px;
    line-height: 100px;
    white-space: nowrap;
}

• 多行文本

1. 使用padding填充上下间距（可以根据内容撑开盒子的情况下）
   
2. 使用table元素配合vertical-align:middle;

在td中，它的属性默认是居中的。

---

当使用 vertical-align时，无法生效，可能需要看下它适用的元素

vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

以及它内部计算基线的方式，w3c中是这样说明的，每个元素会有不同的基线，对齐的原则也是需要让它们跟父级的基线是在同一线上。

For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'.

除了固定的对齐方式，它的值也可以是固定长度或者百分比

/* 
    <length> 
    使元素的基线对齐到父元素的基线后移动的长度。可以是负数。
*/
vertical-align: 10em;
vertical-align: 4px;

/* 
    <percentage> 
    使元素的基线对齐到父元素的基线后移动相对于 行高 的百分比，可以是负数。
*/
vertical-align: 20%;

3. 使用伪元素

.pseudo-center {
  position: relative;

}
.pseudo-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;

}
.pseudo-center p {
  display: inline-block;
  vertical-align: middle;
}

2. 块级元素

• 已知元素高度

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

• 未知元素高度

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

• 固定高度，且子元素可能撑大父元素，使用table配合对齐

.parent { 
    display: table;
    table-layout: fixed; /* 不撑开宽度时使用 */
} 
.child { 
    display: table-cell;
    vertical-align: middle;
}

• 可以使用flex布局

display: flex; 
/* 改变主轴 */
flex-direction: column; 
justify-content: center;

/*  不改变主轴  */
align-items: center;

---

水平&垂直方向

1. 拥有固定宽高

使用等于该宽度和高度一半的负边距，再将其绝对定位在 50%/50% 后

.parent { 
    position: relative;
} 
.child { 
    width: 300px;
    height: 100px;
    
    position: absolute;
    top: 50%; 
    left: 50%;
    
    margin: -50px 0 0 -150px;
}

也可以这样

.parent { 
    position: relative;
} 
.child { 
    width: 300px;
    height: 100px;
    
    position: absolute;
    
    /* 下面四个属性也复合写inset: 0;（不考虑兼容的情况） */
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    
    margin: auto;
}

2. 没有固定宽高

将上述的margin值改为平移值

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

3. 使用flex/grid布局

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

.parent { 
    height: 100%;
    width: 100%;
    display: flex;
} 
.child {
    margin: auto;
}

.parent { 
    height: 100%;
    display: grid;
} 
.child {
    margin: auto;
}

---

继续补充...