CSS元素垂直居中方法总结

　　坚持，坚持，坚持。。。

　　以上为自我鼓励，哈哈。。。

　　－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

　　相信没有真正是尝试过的人应该都和我同样，以为居中很简单啊，不是有个margin: auto嘛，若是你真正尝试过，你就知道，垂直居中真的不想你想象中那么简单。

　　在平常设计网页过程当中，咱们能够根据text-align: center实现行内元素水平居中问题，咱们也能够根据margin: 0 auto实现块级元素水平居中问题。可是，对于垂直居中，一直都是一个很难解决但常常须要解决的问题。下面由我来给你们介绍几个解决方法。

　　1. 已知宽高，结合绝对定位和负margin来解决

　　首先使用绝对定位，使top和left属性可用。而后将元素经过top和left向下移动适口的50%，此时，元素的左上角位于视口中心点；最后经过负margin来移动元素自身的一半，将元素的中心点移至视口中心点。

body {
    width: 100vw; // vw：是视口宽度的1/100
    margin: 0;
    padding: 0;
}


/* 在已知宽高的状况下，使用负margin解决*/

#way1 {
    width: 300px;
    height: 200px;
    background: #f33;
    position: absolute; 
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -100px;
}

　　2. 未知宽高，结合绝对定位和translate来解决

　　大多数状况下，元素的高度都是由内容撑高，所以咱们很难用负margin来进行移动，css中大部分属性百分比都是相对于父级元素，如padding。可是，咱们能够发现translate中的参数是相对于自身的。所以咱们就能够利用translate，实现前面负margin的功能。

body {
    width: 100vw;
    margin: 0;
    padding: 0;
}


/* 在不知道宽高的状况下，translate属性移动元素自己*/

#way2 {
    width: 300px;
    height: 200px;
    background: #f33;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

　　3. 结合margin和translate来解决

　　咱们知道，margin能够实现块级元素的水平居中问题，咱们能够直接利用margin来进行水平居中操做，在用translate来进行垂直居中。

body {
    width: 100vw;
    margin: 0;
    padding: 0;
}


/* 使用margin对元素进行居中，同时利用vh单位获取视口一半高度 */

#way3 {
    width: 300px;
    height: 200px;
    background: #f33;
    margin: 50vh auto 0; //vh: 视口高度的1/100
    transform: translate(0, -50%);
}

　　4. 使用flexbox实现

　　正常状况下，margin只能实现水平居中，可是当咱们在须要居中元素的父元素设置为flexbox，此时margin：auto就会同时设置水平和垂直居中。

body {
    width: 100vw;
    margin: 0;
    padding: 0;
    display: flex;
}


/* 父元素须要设置为flexbox，而且须要设置高度，margin:auto将会在水平和垂直方向上都居中; */

#way4 {
    width: 300px;
    height: 200px;
    background: #f33;
    margin: auto;
}

　　5. 使用flexbox中的align-items和justify-content属性实现

　　这种方法，必需要设置父元素的高度，不然没法实现垂直上的居中。

body {
    width: 100vw;
    margin: 0;
    padding: 0;
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}


/* 能够在父元素上设置aligin-items和justify-content为center实现居中 */

#way5 {
    width: 300px;
    height: 200px;
    background: #f33;
}

　　传统方法中，会利用表格的特性实现居中效果，也能够利用js来实现效果。上面用到了不少CSS3的属性，可能会存在兼容性问题，望你们根据本身的实际状况有针对性的选择。