1.子div垂直居中显示常用的css
.box {
width: 100%;
height: 100%;
display: flex;//flex布局
justify-content: center;//使子项目水平居中
align-items: center;//使子项目垂直居中
}
2.垂直往下排列,居中
.flexcenter{
display: flex;
direction: row;
align-items: center;
justify-content: center;
}
3.悬浮图片+晃动+间接显示
@-webkit-keyframes start {
0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
60% {opacity: 1;-webkit-transform: translate(0,0);}
100% {opacity: 0;-webkit-transform: translate(0,-8px);}
}
@-moz-keyframes start {
0%,30% {opacity: 0;-moz-transform: translate(0,10px);}
60% {opacity: 1;-moz-transform: translate(0,0);}
100% {opacity: 0;-moz-transform: translate(0,-8px);}
}
@keyframes start {
0%,30% {opacity: 0;transform: translate(0,10px);}
60% {opacity: 1;transform: translate(0,0);}
100% {opacity: 0;transform: translate(0,-8px);}
}
#array{
position:absolute;z-index:999;-webkit-animation: start 2s infinite ease-in-out;
}
//用法
<img *ngIf="i<length1-1" src="../../assets/imgs/arrow-black.png" [ngStyle]="{'top': screenHeight2, 'left': screenWidth2,'width':'20px','height':'15px'}" id="array">
4.背景图居中裁剪
[ngStyle]="{'background': 'center/100% no-repeat url(' + item1 + ')'