垂直居中-使用position和transform

 

    除了使用padding和line-height属性外,我们还可以使用transform属性来设置垂直居中:

 

    实例

 

.center { 

 

    height: 200px;

 

    position: relative;

 

    border: 3px solid green; 

 

}

 

 

 

.center p {

 

    margin: 0;

 

    position: absolute;

 

    top: 50%;

 

    left: 50%;

 

    transform: translate(-50%, -50%);

 

}