常见元素居中的方法

元素居中

现在不管是水平居中还是垂直居中都有很多方法实现，但是选择适合项目的居中方法是一门优雅的学问，下文推荐一些常用的元素居中方法。

水平居中

• text-align

在元素的父元素上设置text-align: center;使文字/图片水平居中，也是常用于行内元素的一种居中方法。

. container {
  text-align: center;
}

• margin

通常用于设置块级元素居中

.container {
  width: 80%;
  margin-left: auto;
  magin-ight: auto;
}

注：一定要设置宽度，对于块级元素本身是占据一整行的，不设置宽度谈不上居中。

垂直居中

• 设置上下padding相等
  不用设置高度，高度被内容撑开。

.container {
  padding: 40px 0;
  text-align: center;
  background: pink;
}

• 绝对定位实现居中
  未对其设置绝对定位的效果
  设置绝对定位的效果
  注：先对其设置 left 和 top: 50%，意为左上角这个点距左边和上边都为50%，也就是说这个点在页面中是水平垂直居中的。而后设置margin的负值意为元素的宽高的一半，使整个元素水平垂直居中。前提：宽高为固定值！

.container {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -150px;
/*元素宽高为固定值*/

.container {
  position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/*元素宽高未知，不管元素内容有多少，宽高都没有限制*/
}

• vertical-align
  通常用来让行内元素或表格元素在父容器的基线上对齐。

verical-align: middle;

如何理解基线？

通常借助伪元素使元素垂直居中：

伪元素的高度与父容器相同，图片会基于伪元素的中线对齐，这时图片就有了居中效果。

• table-cell
  事实上使对表格元素使用 vertical: middle;
  
  缺点：块级元素使用 table-cell 后就不是块级元素了，若不写定宽度，会造成宽度收缩。
• 弹性布局（display: flex;）
  
  为了更好的理解弹性布局，推荐以下两个小游戏：
  青蛙游戏
  塔防游戏

遇到好的居中方法会持续更新。。。

未完待续，敬请期待。。。