common.css

.vertical-center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.horizontal-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.img-center {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.space-between {
    justify-content: space-between;
}

.space-around {
    justify-content: space-around;
}

/*长文本自动换行*/
.pre {
    white-space: pre-line;
    word-wrap: break-word;
}

/*透明度*/
.transparent {
    filter: alpha(opacity=50);
    -khtml-opacity: 0.5;
    -moz-opacity: 0.5;
    opacity: 0.5;
}

/* margin zone*/
.mar-top-10 {
    margin-top: 10px;
}

.mar-top-20 {
    margin-top: 20px;
}

.mar-top-30 {
    margin-top: 30px;
}

.mar-top-40 {
    margin-top: 40px;
}

.mar-top-50 {
    margin-top: 50px;
}

.mar-bottom-10 {
    margin-bottom: 10px;
}
.mar-bottom-20 {
    margin-bottom: 20px;
}
.mar-bottom-30 {
    margin-bottom: 30px;
}
.mar-bottom-40 {
    margin-bottom: 40px;
}
.mar-bottom-50 {
    margin-bottom: 50px;
}

.mar-left-10 {
    margin-left: 10px;
}
.mar-left-20 {
    margin-left: 20px;
}
.mar-left-30 {
    margin-left: 30px;
}
.mar-left-40 {
    margin-left: 40px;
}
.mar-left-50 {
    margin-left: 50px;
}

.mar-right-10 {
    margin-right: 10px;
}
.mar-right-20 {
    margin-right: 20px;
}
.mar-right-30 {
    margin-right: 30px;
}
.mar-right-40 {
    margin-right: 40px;
}
.mar-right-50 {
    margin-right: 50px;
}