用css实现水平居中和垂直居中

1.行内元素（inline性质）可以使用：text-align: center;

2.单个块级元素：margin-left 和 margin-right 为 auto；（ margin: 0 auto;）

3.多个块级元素：设置不同的 display 属性，设置为 inline-block， 一个是设置为 flexbox（或 margin: auto）

.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}
.flex-center {
  display: flex;
  justify-content: center;
}

垂直居中：

1.行内元素或者文字显示为垂直居中，仅仅是因为它们的上下内边距相等：

2.padding 出于某些原因不能用，并且你要使一些不换行的文字居中，这里有一个技巧，就是设置文字的 line-height 和 height 的值相等。

3.多行可以考虑

①.vertical-align:middle，

②. display: flex; justify-content: center; flex-direction: column;(适用于父容器具有一个固定的额高度)

③."虚元素"?

其中一个完整高度的伪元素放置在容器内，并与文本垂直对齐。

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

4.块级元素

知道高度

.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; */
}

不知高度

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
}

或：parent { display: flex; flex-direction: column; justify-content: center; }

其他：

1.用负的 margin 值使其等于宽度和高度的一半，设置它的绝对位置为 50% 

2.transform 属性，用 translate 设置 -50%（它以元素当前的宽和高为基础）来居中：

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