元素水平垂直居中的方法有哪些？如果元素不定宽高呢?

水平居中

• 内联元素：text-align: center
• 块级元素：margin: 0 auto
• 内联块实现：将行内多个元素设定为 inline-block 行内块，然后在父元素添加 text-align。
• 弹性布局：display: flex; justify-content: center;。
• 固定宽度-外边距偏移：先相对于父元素向右偏离半个父元素宽度，然后使用负左外边距(负 margin)校正居中元素的偏移量。
• 固定宽度-外边距适配：(position: absolute; left: 0; right: 0; margin: 0 auto)
• 未知宽度：当定位元素未知宽度时，使用 transform 对自身进行偏移可以解决这个问题(left + transform)

1. 行内元素居中（使用text-align）

对于行内元素（如span），可以使用text-align属性来居中其父元素内的内容。

.parent {
  text-align: center;
}

2. 块级元素居中（使用margin）

块级元素可以通过设置左右margin为auto来居中。

.child {
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* 必须指定宽度 */
}

3. flexbox居中

使用display: flex可以很容易地实现水平居中。

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

垂直居中

• 单行内联元素：设置内联元素的高度 height 和行高 line-height 相等，从而使元素垂直居中。
• 表格布局：使用表格布局的 vertical-align: middle 可以实现子元素的垂直居中。
• 弹性布局：为父元素设置为 flex 弹性布局，并设置布局方向 flex-direction 为垂直，子元素适配 justify-content 为居中即可实现垂直居中
• 精灵元素：利用精灵元素（Ghost Element）技术实现垂直居中，即在父容器内放一个 100% 高度的伪元素，让 文本 和 伪元素 垂直对齐，从而达到垂直居中的目的。
• 固定高度-外边距偏移：当居中元素的 高度和宽度 已知时，垂直居中问题就很简单。通过 绝对定位 元素距离顶部 50%，并设置 margin-top 向上偏移元素高度的一半，就可以实现垂直居中了。
• 固定高度-外边距适配
• 未知高度：与 块级元素-有滚动条 实现效果类似，只是对定位元素自身的偏移使用 transform 实现(top + transform)
• 图片垂直居中：font-size: 0。在 font-size 不为 0 时，图片设置垂直居中时的中线位置并不是它的父元素的绝对中线位置，它们会有一个和字符 x 高度相关的高度差。设置 font-size 为 0，会消除这个高度差，使图片的中线位置和父元素中线重合。

1. 单行文本居中（使用line-height）

对于单行文本，可以将line-height设置为与父元素的高度相同来实现垂直居中。

.parent {
  height: 100px;
  line-height: 100px;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

2. 绝对定位居中

使用绝对定位和transform属性可以垂直和水平居中。

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

3. flexbox居中

使用display: flex可以很容易地实现垂直居中。

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

水平垂直居中

• 文本元素：通过设置父元素容器 text-align 实现水平居中，设置一致的高度（height）和行高（line-height）实现对子元素的垂直居中，垂直居中元素设置 vertical-align 以及 line-height 为 initial 实现子元素内部的基准线垂直居中
• 固定垂直居中元素的宽高：相对于父元素容器左边距和上边距坐标偏移 50%，通过计算垂直居中元素宽/高，利用负 margin 偏移自身宽/高的 50%。或者通过设置上下左右坐标为 0，外边距自适应 auto 实现垂直居中。两种处理手法都需要设置垂直居中元素为标准盒模型。
• 不确定垂直居中元素的宽高：相对于父元素容器左边距和上边距坐标偏移 50%，使用 transform + translate 将垂直居中元素自身偏移负 50%，使用标准盒模型
• 弹性布局：父元素设置为弹性布局容器，并将 justify-content 和 align-items 设置为 center 居中
• 网格布局：父元素设置为网格布局容器，垂直居中元素设置外边距 margin 为自适应 auto 即可

1. flexbox居中

使用display: flex可以很容易地实现水平和垂直居中。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; /* 必须指定高度 */
}
.child {
  /* 不需要额外样式 */
}

2. grid居中

使用display: grid也可以很容易地实现水平和垂直居中。

.parent {
  display: grid;
  place-items: center;
  height: 100px; /* 必须指定高度 */
}
.child {
  /* 不需要额外样式 */
}

3. absolute + transform居中

使用绝对定位和transform属性可以水平和垂直居中。

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