一、常见的居中方式

对于居中方式，除了 text-align、flex、margin 和 transform 方式，还有哪些呢？

《干货!各种常见布局实现+知名网站实例分析》中已经讲的很详细了，这里我主要记录一下之前自己不太熟悉的方法。

1. 多行文本垂直居中

#parent {
  display: table-cell;
  vertical-align: middle;
}

优点	缺点
兼容性好	tabl-cell 元素，需给父元素设置 `display: table;`，否则宽高的值设置百分比无效 2. 无法设置 margin 3. 当内容溢出时，height 无效（也就无法实现 `overflow: hidden;` 等）

2. 图片垂直居中

图片是可替换元素，也就是同时具有行内元素（text-align: center; 生效），行内块（默认的宽高就是本身内容的宽高，可以和其他行内、行内块元素一行显示），和块级元素（可自定义宽高）的某些特性。

#parent { 
  height: 150px; 
  line-height: 150px; 
  font-size: 0; 
  /* text-align: center; 水平居中也生效 */
} 

img#son {
  vertical-align: middle; /* 默认是基线对齐，改为 middle */
}

优点	缺点
简单；兼容性较好	需要添加 font-size: 0; 才可以完全的垂直居中；（这个好像没有发现诶）

3. 子元素绝对定位

除了 top left transform 之外还可以这样：

#parent {
  position: relative;
} 
#son { 
  position: absolute; 
  margin: auto; 
  width: 100px;
  height: 100px;
  top: 0; 
  bottom: 0; 
  left: 0;
  right: 0;
}

优点	缺点
简单；兼容性较好(ie8+)	脱离文档流

transform 兼容性不好（ie9+）

4. button 作为父元素

除了 top left transform 之外还可以这样：

button#parent { /* 改掉 button 默认样式就好了，不需要居中处理 */
  height: 150px; 
  width: 200px; 
  outline: none; 
  border: none;
} 
#son { 
  display: inline-block; /* button 自带 text-align: center，改为行内水平居中生效 */
}

优点	缺点
简单，充分利用默认样式	1. 需要清除部分默认样式 2. 水平垂直居中兼容性很好，但是 IE 下点击会有凹陷效果

参考：《干货!各种常见布局实现+知名网站实例分析》

二、flex 布局

flex 除了是居中的最优解，还可以用在哪里呢？

我们来简单实现一下这个需求：

这是我今天想看的下饭剧列表

下饭剧名（类型）：剧名如果过长需要缩略显示，不过我想知道这个剧是什么类型的，所以类型不能缩放。
观看时间始终靠右显示

flex: <flex-grow> <flex-shrink> <flex-basis>

flex-grow：默认 0。如果父容器（display: flex;）中有剩余空间，则放大该区域。如果父容器中有多个子元素有 flex-grow 属性，值越大的获取到剩余空间的比例分配越大。

flex-shrink：默认 1。空间不足时等比缩小，数字越大缩小比例越大。

flex-basis：默认 auto，即根据内容确定宽高，可设置固定值。

以上，一句话总结，移动端兼容性允许的情况下能用 flex 就用 flex

CSS 之布局 | 青训营笔记