📂前端
🔖前端
2022-03-31 18:07阅读: 119评论: 0推荐: 0

【前端】【样式】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;
} 
posted @   萌狼蓝天  阅读(119)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
展开