【前端】【样式】CSS居中的三种方式

最新推荐文章于 2024-04-02 14:52:40 发布

萌狼蓝天

最新推荐文章于 2024-04-02 14:52:40 发布

阅读量281

点赞数

原创文章谢绝转载！不允许搬运！不授权任何人！

本文链接：https://blog.csdn.net/ks2686/article/details/124031390

版权

@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;
}