css使子元素在父元素居中的各种方法/ 子元素居中有哪些方案

html结构

方法一： display:flex
弹性盒

.parent {
  width: 500px;
  height: 500px;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
}
.child {
  width: 100px;
  height: 100px;
  background: blue;
}

方法二：display:table-cel
此方法用的很少，大部分用于整体文本居中

.parent{
  width: 500px;
  height: 500px;
  background: red;
  display: table-cell;
  vertical-align: middle;
}
.child{
  width: 100px;
  height: 100px;
  background: blue;
  margin: auto;
}

方法三：绝对定位和0

.parent{
  width: 500px;
  height: 500px;
  background: red;
  position: relative;
}
.child{
  width: 100px;
  height: 100px;
  background: blue;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;   
}

方法四：负边距

.parent{
  width: 500px;
  height: 500px;
  background: red;
  position: relative;
}
.child{
  width: 100px;
  height: 100px;
  background: blue;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px; 
}
以上四种方法都可以完成用css实现子元素在父元素实现水平和垂直居中。