水平居中兼容性

在实际开发中我发现要在现代浏览器中实现水平居中可以使用弹性盒布局
“margin: auto” | Can I use... Support tables for HTML5, CSS3, etc

例如

.container {
  display: flex;
  justify-content: center;
}

这样的写法在主流现代浏览器中表现出色
不过在 IE8-9 等不支持弹性盒布局的旧式浏览器中这段代码不会生效
为兼容老式浏览器我通常会使用 margin: 0 auto; 来实现水平居中
margin: auto 兼容性非常理想
设定子元素的宽度并在其样式中加入

.block-element {
  width: 200px;
  margin: 0 auto;
  display: block;
}

即可在不支持弹性盒布局的旧式浏览器中让该块级元素在父容器中水平居中

在实践中我还会结合响应式布局及媒体查询来确保在不同分辨率下依旧保持居中和良好的用户体验

失效的几种情况

没有设置 width

如果子元素未设置宽度则无法计算居中的位置
如需在父元素中居中
必须为子元素指定宽度

.element-without-width {
  margin: 0 auto;
  display: block;
  /* 无法实现水平居中 因为缺少宽度 */
}

不是块级元素

margin:0 auto; 只对块级元素有效
如果元素是行内或行内块级元素可以先将其转换为块级元素

.inline-element {
  display: block;
  margin: 0 auto;
  width: 100px;
}

该元素设置了浮动属性

对于已经浮动的元素 margin:0 auto; 不会起作用
因为浮动元素已脱离文档流
如需居中可移除 float 使用文本居中或弹性盒进行布局

.floated-element {
  float: left;
  /* 这里即使加上 margin:0 auto; 也无效 */
}

该元素设置了绝对定位

对于 position:absolute; 的元素
margin:0 auto; 也不会让其在父元素中居中
这种情况下我会考虑通过 transform 或 calc 来定位居中

.absolute-element {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}