1. 程式人生 > 其它 >【前端】【樣式】CSS居中的三種方式

【前端】【樣式】CSS居中的三種方式

@charset "utf-8";
/* CSS Document */
/**
*開發者:萌狼藍天
*當前版本:v0.1[Debug]
*最後更新日期:20210918
**/
/*居中問題處理*/
.center-apm{
/*  定位-居中*/
    position: absolute;
    margin:0;
    top:0;
    left:0;
    right:0;
    bottom: 0;  
/*  元素居中*/
    text-align: center;
}
.center-apt{
/*  定位-居中*/
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
/*  元素居中*/
    text-align: center;
}
.center-al{
/*  定位-居中*/
   margin:0 auto;
/*  元素居中*/
   text-align: center;
}
.text-center{
    display:table-cell;
    text-align: center;
    
}
.text-center-t{
    text-align: center;
}
.text-center-d{
    display:table-cell;
}

.div-block-online{
   display: inline-block;
}
.div-block{
   display:block;
}
/*邊框問題處理*/
.border-r{
  border-radius: 5px;
}
/*邊框-墨綠色*/
.border-GreenBlackish{
 border:#20716A solid 1px;
} 
.border-GreenBlackish:focus{
 border:#FFF78C solid 1px;
} 
.border-GreenBlackish:hover{
 border:#23A393 solid 1px;
} 
/*邊框-墨藍色*/
.border-BlueBlackish{
 border:#182952 solid 1px;
} 
.border-BlueBlackish:focus{
 border:#E14594 solid 1px;
} 
.border-BlueBlackish:hover{
 border:#2B3595 solid 1px;
} 
/*邊框-橙橘色*/
.border-Orange{
 border:#CA431D solid 1px;
} 
.border-Orange:focus{
 border:#CA431D solid 1px;
} 
.border-Orange:hover{
 border:#FF9900 solid 1px;
}