如何在一个div中使其子div居中的5种方式详解编程语言

demo地址-codepen

第一种

基于绝对定位，要求有固定的宽高

 
main{ 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  margin-top: -5em; 
  margin-left: -9em; 
   
  width: 18em; 
  height: 10em; 
}

使用calc方法对第一种进行简化

 
main{ 
  position: absolute; 
  top: calc(50% - 5em); 
  left: calc(50% - 9em); 
 
  width: 18em; 
  height: 10em; 
}

第二种

在translate变形函数中使用百分比， 不依赖固定宽高

缺点：

 1. 有时候不能使用绝对定位

 2. 如果需哟啊居中的元素已经在高度上超过了视口， 那么他的顶部会被视口裁剪掉

 3. 在某些浏览器中，这个方法肯会导致元素的显示有一些模糊，因为元素可能被放置在半个 像素上。

 
main{ 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
 
  padding: 1em; 
}

第三种

基于视口单位vh

 
main{ 
  margin: 50vh auto; 
  transform: translateY(-50%); 
  width: 18em; 
}

为什么不能以下代码来做那？
margin: 50% auto 0 ;
transform: translateY(-50%);
              

因为margin的百分比值是以父元素的宽高来做解析基准的

第四种

基于Flexbox解决方案-最佳解决方案，只需要考虑flex

 
main{ 
  margin: auto; 
} 
body{ 
  display: flex; 
  min-height: 100vh; 
}

第五种

在有宽高的父级下居中

 
html{ 
  height: 100%; 
} 
body{ 
  display: flex; 
  align-items: center; 
  justify-content: center; 
 
  width: 100%; 
  height: 100%; 
} 
main{ 
  ... 
}