如何将div定位到父div中心？尝试多种方案未奏效求助

嘿，我太懂重新捡起来编码的那种生疏感了，尤其是遇到定位这种看似简单却容易踩坑的问题！别担心，我给你几个经过验证的可行方案，涵盖不同的CSS写法，你可以逐个尝试——毕竟有时候一个小小的拼写错误或者属性漏写，就会让所有尝试都白费功夫。

这是目前最常用的居中方案，写法直观且兼容性极好（除了极老的IE）。只需要给父div设置几个属性，子div就能自动水平+垂直居中：

.parent-div {
  display: flex;
  /* 水平居中 */
  justify-content: center;
  /* 垂直居中 */
  align-items: center;
  /* 可以给父元素设置高度，方便看到居中效果，比如 */
  height: 300px;
  border: 1px solid #ccc; /* 加个边框方便调试 */
}

.child-div {
  /* 子元素不需要额外定位属性，默认就会居中 */
  width: 150px;
  height: 100px;
  background: #f0f0f0;
}

如果你不需要兼容太老的浏览器，Grid布局一行代码就能搞定居中，简直是懒人福音：

.parent-div {
  display: grid;
  /* 同时实现水平+垂直居中 */
  place-items: center;
  height: 300px;
  border: 1px solid #ccc;
}

.child-div {
  width: 150px;
  height: 100px;
  background: #f0f0f0;
}

如果需要支持IE9及以上，这个方案是稳妥的选择，原理是通过绝对定位把元素移到父容器的50%位置，再用translate把元素拉回自身的一半尺寸，实现精准居中：

.parent-div {
  position: relative; /* 必须设置相对定位，让子元素的绝对定位基于它 */
  height: 300px;
  border: 1px solid #ccc;
}

.child-div {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 平移自身的50%，实现居中 */
  transform: translate(-50%, -50%);
  width: 150px;
  height: 100px;
  background: #f0f0f0;
}

这个方案比较传统，但胜在兼容性极强，甚至能支持IE8：

.parent-div {
  display: table-cell;
  text-align: center; /* 水平居中 */
  vertical-align: middle; /* 垂直居中 */
  height: 300px;
  width: 100%; /* 表格单元格需要设置宽度 */
  border: 1px solid #ccc;
}

.child-div {
  display: inline-block; /* 让子元素支持text-align居中 */
  width: 150px;
  height: 100px;
  background: #f0f0f0;
}

小提醒帮你排查问题 #

如果试了这些方案还是不行，你可以检查这几个细节：

• 有没有拼写错误？比如把justify-content写成justifycontent（漏了连字符），或者transform写成transfrom
• 父元素有没有设置足够的高度？如果父元素是自适应内容高度，你可能看不到垂直居中的效果，可以先给父元素加个固定高度测试
• 有没有其他CSS规则冲突？比如子元素被设置了margin: auto以外的margin值，或者父元素的overflow属性影响了定位

希望这些方案能帮你解决问题，重新找回编码的感觉！

内容的提问来源于stack exchange，提问作者nick