css居中

水平居中

1.行内或者具有行内元素性质的元素（比如文字或者链接）

父元素为块级元素，子元素为行内或者具有行内元素性质的元素，可以使用text-align: center;

2.单个块级元素

设置块级元素的 margin-left 和 margin-right 为 auto 来使它水平居中（width 属性必须被设置，否则它会占满宽度）。代码：
margin: 0 auto;

垂直居中

1.行内或者具有行内元素性质的元素（比如文字或者链接）

单行

我们可以设置上下内边距padding相同，或者line-height和height的值相等。

多行

-父元素高度确定的单行文本（内联元素） 设置 height = line-height；
-父元素高度确定的多行文本（内联元素）a:插入 table （插入方法和水平居中一样），然后设置vertical-align:middle；b:先设置 display:table-cell 再设置 vertical-align:middle；

2.块级元素

2.1知道块级元素的高度

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

2.2元素高度未知

可以通过 transform 来达到目的：

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

垂直水平居中

3.1元素有固定的宽和高

用负的 margin 值使其等于宽度和高度的一半，当你设置了它的绝对位置为 50% 之后，就会得到一个跨浏览器支持的居中:

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

3.2元素的宽和高未知

如果不知道元素的高度和宽度，可以用 transform 属性，用 translate 设置 -50%（它以元素当前的宽和高为基础）来居中:

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