css3的垂直居中、上下垂直居中、两端对齐

/*垂直居中 */
.dib_vm {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

/*垂直 */
.dib_v {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

/*两端左右对齐 */
.dib_lr {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
/*左到右*/
/*left to right*/
.ltor{
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
     -webkit-box-direction: normal;
     -webkit-box-orient: horizontal;
     -moz-flex-direction: row;
     -webkit-flex-direction: row;
     flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

上下垂直居中代码：

 

 

 

 

 

两端对齐：

转载于:https://www.cnblogs.com/liaohongdong/p/5466651.html