CSS 对齐

水平对齐

左对齐

右对齐

居中对齐

方法1：使用margin

margin: 0 auto;

方法2：使用text-align

text-align: center

此方法对于 inline 和 inline-* 元素的水平方向居中，Eg: inline, inline-block, inline-table, inline-flex 元素都有效

方法3：使用flex布局

display: flex;
justify-content: center;

在父容器上设置以上的样式

垂直对齐

上对齐

下对齐

居中对齐

方法1：使用 text-align 结合padding

  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;

设置文字水平居中，并且上下内边距相等

方法2: 利用 line-height

line-height: container-height;

没有元素包裹的文本的时候，利用 line-height 属性。将容器的 line-height 的值设置为与容器高度相同的值，就能很轻松的居中文本。

方法3：对于表格中的垂直居中

vertical-align: middle;

方法4：如果知道子元素的高度，使用绝对定位

.absolute-parent {
  position: relative;
  background-color: #ffcf22;
  height: 200px;
}

.absolute-child-with-height {
  position: absolute;
  background-color: greenyellow;
  text-align: center;
  top: 50%;
  left: 50%;
  height: 100px;
  width: 100px;
  margin-left: -50px;  //half of height
  margin-top: -50px;  //half of width
}

方法5：如果不知道子元素的高度，使用绝对定位

.absolute-parent {
  position: relative;
  background-color: #ffcf22;
  height: 200px;
}

.absolute-child-with-height {
  position: absolute;
  background-color: greenyellow;
  width: 30%;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}

方法6：使用flex布局 单个块级元素的垂直且水平方向居中, 设置父级元素为

display: flex;
justify-content: center; //主轴方向上的对齐
align-items: center; //交叉轴方向上的对齐

方法7：使用绝对定位结合margin

position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 50%;
height: 50%;