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的属性，可能会存在兼容性问题，望大家根据自己的实际情况有针对性的选择。

秒客网