css水平居中、垂直居中、水平垂直居中

css水平居中、垂直居中、水平垂直居中

水平居中

行内元素：block+text-align
块级元素：
方案一：分宽度定不定两种情况
  定宽度——margin： 0 auto；（作用：使盒子自己居中，意思是上下距离为0，auto就是左右自适应两边距离）；
  不定宽度——设置子元素display: inline-block或display: inline, 即将子元素转换成行内块级/行内元素，给父元素设置 text-align: center
方案二：使用定位属性
  首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；
  定宽度——设置绝对子元素的margin-left：- 元素宽度的一半px；或者设置transform：translateX(-50%); 注：这时margin-left的值是相对于父元素的偏移；translateX(-50%)是相对于子元素本身的偏移。
  不定宽度——利用css3新增属性transform: translateX(-50%);
方案三：使用flexbox布局实现（宽度定不定都可以）
  只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

垂直居中

单行的行内元素：只需要设置单行行内元素的“行高等于盒子的高”即可；
多行的行内元素：使用tabel，给父元素设置display: table-cell; 和 vertical-align: middle;
块级元素：
方案一：使用定位
  首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50, 即让子元素的左上角垂直居中；
  定高度：设置绝对子元素的margin-top: - 元素高度的一半px; 或者设置transform: translateY(-50%);
  不定高度：利用css3新增属性transform: translateY(-50%);
方案二：使用flexbox布局实现（高度定不定都可以）
  使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

水平垂直居中

已知高度和宽度的元素：
方案一
  设置父元素为相对定位，给子元素设置绝对定位， top: 0; right: 0; bottom: 0; left: 0; margin: auto;（兼容性：IE7及之前版本不支持）
(思考：为什么这样就可以实现居中呢？)
left: 0;    right: 0;
top: 0;    bottom: 0;
这四个语句表示把元素充满容器，同时自身指定了宽度，总宽度（固定）= width（固定） + margin-left + margin-right；
margin: auto;
当margin设置为auto的时候，左右边距会平分，元素自然就居中了，垂直居中原理一致。
方案二
  设置父元素为相对定位，给子元素设置绝对定位，
  left:50%;              top: 50%;
  margin-left: - 元素宽度的一半px;    margin-top: -元素高度的一半px;

未知高度和宽度的元素
方案一：使用定位属性
  设置父元素为相对定位，给子元素设置绝对定位，
  left:50%;              top: 50%;
  transform: translateX(-50%);     transform: translateY(-50%);
方案二：使用flex布局实现
  设置父元素为flex定位
  justify-content: center;        align-items: center;
方案三：使用table
  将父元素设置为display: table; 将子元素设置为display: table-cell; text-align: middle; vertical-align: middle;

参考
如何将一个div水平垂直居中？6种方法做推荐
CSS水平居中+垂直居中+水平/垂直居中的方法总结