上下左右居中

1.父为block element，子随意

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

2.父为block element，子为inline element

father{text-align: center;line-height: 父高度;}

3.父为block element，子为block element

father{
  position: relative;
}
child{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -子宽;
  margin-top: -子高;
}

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

father{
  position: relative;
}
child{
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  margin:auto;
}

4.父为inline element，子为inline element
给父元素设置padding，也就是上下左右padding一致
ps：以前inline element的上下padding不起作用，现在起作用了，但是还不太好用，要缩到上面去，谨慎使用

以上block element默认有宽高

---

水平居中
内联元素：爸爸身上text-align:cneter
块级元素：margin-left: auto; margin-right: auto;

垂直居中
1.父元素没有定高度：自己身上定padding：10px 0；//就是上下padding一致
2.父元素确定高度。同上 上下左右居中