设置position:absolute后div容器收缩，如何让logo在#logo容器中居中？

当你给<img>设置position: absolute后，这个元素就脱离了正常的文档流——简单说就是它不再占据父容器的空间，父容器#logo因为没有其他流内元素来支撑高度，就会收缩到近乎“零高度”。而你原本以为的父元素设relative、子元素设absolute，只是让子元素的定位参考父容器，但并不会让父容器保留子元素的尺寸哦。

下面给你几个实用的办法，既能让#logo容器保持合适高度，又能让logo完美居中：

方法1：给父容器设置固定/最小高度 + 绝对定位居中 #

如果logo的尺寸是固定的，可以给父容器设置对应高度，再用绝对定位+transform实现精准居中：

#logo {
  position: relative;
  /* 替换成你logo的实际高度，比如80px */
  height: 80px;
  /* 可选：如果需要容器固定宽度，也可以设置width */
  width: 200px;
}

#logo img {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 用transform把元素自身往左上挪一半，实现完美居中 */
  transform: translate(-50%, -50%);
}

方法2：用Flex布局（推荐！更灵活） #

Flex布局是现在居中元素的首选方案，不用硬写父容器高度，还能自适应不同尺寸的logo：

#logo {
  display: flex;
  /* 水平方向居中 */
  justify-content: center;
  /* 垂直方向居中 */
  align-items: center;
  /* 可选：如果需要容器有最小高度，避免太扁 */
  min-height: 80px;
}

/* 这里img不需要任何定位属性，Flex会自动帮你居中 */
#logo img {
  /* 可选：限制logo最大尺寸，防止溢出容器 */
  max-width: 100%;
  max-height: 100%;
}

方法3：让img变成块级元素 + margin:auto #

如果不需要复杂布局，这个轻量方法也很实用：

#logo {
  /* 给父容器设置宽度，否则块级img会占满整行 */
  width: 200px;
  /* 可选：设置固定高度来支撑垂直居中 */
  height: 80px;
}

#logo img {
  display: block;
  /* 水平居中 */
  margin: 0 auto;
  /* 如果要垂直居中，结合line-height（前提是父容器高度固定） */
  line-height: 80px;
  vertical-align: middle;
}

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