如何在不知道子元素宽度的情况下将元素在div内居中

下面是3种生产环境常用的实现方式，不需要提前获取图片宽度即可生效：

方案1：Flex布局（推荐） #

Flex是目前兼容性、易用性最优的方案，仅需修改父容器样式即可，无需调整原有img的样式规则：

/* 你的外层div样式 */
div {
  width: 100%;
  height: 90px;
  display: flex;
  justify-content: center;
}
/* 原有img样式保持不变：height:90px; width: auto; */

兼容范围：支持IE10及以上所有现代浏览器。

方案2：行内元素对齐（兼容老浏览器） #

img默认属于行内块级元素，仅需给父容器添加文本居中属性即可生效，兼容IE6以上所有浏览器：

div {
  width: 100%;
  height: 90px;
  text-align: center;
}

注意：如果父容器内还有其他行内/行内块元素，会同时被居中，仅适合子元素只有图片的场景。

方案3：绝对定位适配（复杂场景通用） #

如果父容器内有多种类型元素、不想影响其他元素布局，可以用定位方案：

div {
  width: 100%;
  height: 90px;
  position: relative;
}
div img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* 原有样式保持不变：height:90px; width: auto; */
}

兼容范围：支持IE9及以上所有现代浏览器，IE9以下需要加浏览器前缀适配transform属性。

内容的提问来源于stack exchange，提问作者Constantly Groovin'