【前端】【样式】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;
}
版 权 声 明
分类:
标签:
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步