一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

水平居中

前提：父元素是块级盒子容器，父元素的宽度已经设定好。
1.子元素是块级元素且宽度没有设定
没有存在水平居中一说，因为子元素是块级元素，没有设定宽度，那么它会充满整个父级元素的宽度，即在水平位置上宽度和父元素一致。
2. 子元素是行内元素
子元素的宽度是其内容撑开的，所以给父元素设定，text-align:center。
3. 子元素是块级元素，且宽度已经设定
方案一：给子元素添加：margin：0 auto;
方案二：计算指定父元素的padding-left/padding-right/margin-left/margin-right=（父宽-子宽）/2,同时给父和子设定box-sizing:border-box;
方案三：通过子元素相对父元素绝对定位
父相对定位，子绝对定位；
子：left:50%; margin-left:-子宽的一半(比如子宽度100px,那么就是-50px)/transform:translateX(-50%) ;
transform: css3里用于元素2d/3d的转换的属性, 值translateX: 转换x轴的值,-50%就是向左边平移自身宽度的50%;

方案四：父元素弹性布局
display:flex;flex-direction:row;justify-content:center;

垂直居中

前提：父元素是盒子容器
1.子元素是行内元素
高度是由其内容撑开的；

• 单行：设定父元素的line-height为其高度使得子元素垂直居中；
• 多行：通过给父元素设定display:inline/inline-block/table-cell;vertical-align:center;
  2.子元素是块级元素，高度没有设定
  方案一：通过父元素设定：
  display:inline/inline-block/table-cell;vertical-align:center;
  方案二：flexbox
  父元素设定：
  display:flex;flex-direction:column;justify-content:center;
  3.子元素是块级元素，高度设定， 方案一：计算子元素的padding-top/padding-bottom/margin-top/margin-bottom=（父高-子高）/2, 同时给父和子设定box-sizing:border-box;
  方案二：利用绝对定位，通过子元素相对父元素绝对定位
  父相对定位，子绝对定位；子元素高已知；
  子：top:50%;margin-top:-子高的一半;
  方案三：利用绝对定位，通过子元素相对父元素绝对定位
  父相对定位，子绝对定位；子元素高未知；
  子：transform:translateY(-50%); 方案四：flexbox;
  父元素：
  display:flex;flex-direction:column;justify-content:center;

水平垂直同时居中

1.已知子元素宽高
top：50%;
left:50%;
margin-top:-子高的一半； margin-left:-子宽的一半；
2.未知子元素的宽高
top:50%;
left:50%;
transform:translate(-50%,-50%);
最后，万能的方案弹性布局flexbox：

.son{
  display:flex;  
  justify-content:center;
  align-items:center;
}

完结

总结：flex布局在解决居中问题上可以说是万能的