怎样将一个元素水平垂直居中

一、水平居中

1. 如果是行内元素，则对其父元素应用 text-align: center;
2. 如果是块级元素，则对其应用 margin: auto;，前提是这个块状元素有固定的宽度。

二、垂直居中

2.1 行内元素或行内块状元素

1. 如果是单行，可以将其行高 inline-height 设置为容器的高度, 或者调整其上下 padding 值
2. 如果是多行，也可以调整其上下 padding 值

2.2 块状元素

2.2.1 绝对定位的方法

2.2.1.1 自身宽高已知

block-element {

  /*设置自身宽高*/
  width: 18px;
  height: 10px;

  /*相对于父元素绝对定位*/
  position: absolute;

  /*向下向左分别移动父元素高和宽的50%*/
  top: 50%;
  left: 50%;

  /*通过 margin 往回移动自身宽高的50%*/
  margin-top: -5px;
  margin-left: -9px;
}

block-element {
  width: 18px;
  height: 10px;
  position: absolute;

  /*通过 cal() 方法得到运算结果*/
  top: cal(50% - 5px);
  left: cal(50% - 9px);
}

2.2.1.2 自身宽高未知

block-element {
  position: absolute;
  top: 50%;
  left: 50%;

  /*这里的百分比是针对自身宽高的*/
  transform: translate(-50%, -50%);
}

2.2.2 利用 flexbox

father-element {
  display: flex;
}
block-element {
  margin: auto;
}

或者直接在父元素上应用：

father-element {
    display: flex;
    align-items: center;
    justify-content: center;
}