水平垂直居中小结

  咱们在页面布局中常常会遇到须要将内容水平/垂直居中的状况，如今咱们就来梳理一下实现的方法。

1、水平居中

  1.行元素设置其父元素的text-align：center，适用于单行文本水平居中。
  2.块元素设置其自己的左右margin为auto便可,适用于设置了必定宽高值的块元素。
  3.使用flex

2、垂直居中

1. line-height

  使行元素垂直居中，能够设置行元素的line-height值，适用于单行文本垂直居中。
  若行元素所在的块级父元素有固定高度，则使行元素的line-height值与其父元素的高度相等；若行元素所在的父元素没有设置高度，则行元素设置的line-height值就是其父元素的高度。
  若要居中一张图片，能够设置图片的vertical-align：middle; 图片的父元素设置line-height值。

  2.table-cell

  经过以下设置能够实现元素的垂直居中。
  #parent {display: table;}//此元素会做为块级表格来显示（相似 <table>），表格先后带有换行符。
  #child {
    display: table-cell;//此元素会做为一个表格单元格显示（相似 <td> 和 <th>）
    vertical-align: middle;
  }

  3.使用绝对定位和负外边距

  使用绝对定位实现垂直居中时，元素的margin-top应该等于对应的top值的一半再取负值。
  #parent {position: relative;}
  #child {
    height: 30%;
    width: 50%;
    position: absolute;
    top: 50%;
    margin: -15% 0 0 0;
  }

  4.相等的上下padding值

  #parent {
    padding: 5% 0;
  }
  #child {
    padding: 10% 0;
  }

3、水平垂直居中

  1.绝对定位和负外边距

  使用绝对定位实现水平垂直居中时，元素的margin-top和margin-left应该等于对应的top和left值的一半再取负值。
  #parent {position: relative;}
  #child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
  }

  2.定位和transform

  transform 属性向元素应用 2D 或 3D 转换。该属性容许咱们对元素进行旋转、缩放、移动或倾斜。2D 转换方法，经过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数，默认以元素的中心点为基点，x,y若是为负就反方向移动。这种方法相似于上一种使用负边距。
  #parent {position: relative;}
  #child {
    position: fixed;//相对定位或绝对定位都可
    width:500px;
    height:300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  3.绝对定位和margin:auto

  #parent {position: relative;}
  #child {
    width: 50%;
    height: 30%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

  4.flex布局
  div{
    display: flex;
    justify-content:center;
    align-items:Center;
  }

  能实现居中效果的方法还有不少，这里列出来的方法只是一小部分，往后会慢慢补充。

参考文章1：https://www.cnblogs.com/hutuz...
参考文章2：https://blog.csdn.net/liufeif...