CSS实现水平垂直居中布局(内框不定高宽)

第一种：

.demo1{

  background-color: #61dafb;

  height: 800px;

  width: 800px;

  display: flex;

  justify-content: center;

  align-items: center;

}

第二种：

.demo1{

  background-color: #61dafb;

  height: 800px;

  width: 800px;

  display: flex;

}

 

.child{

  margin: auto;

}

第三种：

.demo1{

  background-color: #61dafb;

  height: 800px;

  width: 800px;

  position: relative;

}

 

.child{

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

}

第四种：

.demo1{

  background-color: #61dafb;

  height: 800px;

  width: 800px;

  display: table-cell;

  text-align: center;

  vertical-align: middle;

}

 

.child{

}

第五种：

.demo1{

  background-color: #61dafb;

  height: 800px;

  width: 800px;

  display: grid;

}

 

.child{

  align-self: center;

  justify-self: center;

}