元素居中方法
2022/8/29 6:53:04
本文主要是介绍元素居中方法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1、定位+外边距
.father{
position:relative;
top:50%;
left:50%;
width:40px;
height:40px;
.son{
posithon:absolute;
margin:-10px 0 0 -10px;
width:20px;
height:20px;
}
}
2、定位+位移(transform:translate(-50%,-50%))
.father{
position:relative;
top:50%;
left:50%;
width:40px;
height:40px;
.son{
posithon:absolute;
transform:translate(-50%,-50%);
width:20px;
height:20px;
}
}
3、弹性布局flex
.son{
display:flex;
justify-content:center;
align-item:center;
}
这篇关于元素居中方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-01为什么公共事业机构会偏爱 TiDB :TiDB 数据库在某省妇幼健康管理系统的应用
- 2024-04-26敏捷开发:想要快速交付就必须舍弃产品质量?
- 2024-04-26静态代码分析的这些好处,我竟然都不知道?
- 2024-04-26你在测试金字塔的哪一层?(下)
- 2024-04-26快刀斩乱麻,DevOps让代码评审也自动起来
- 2024-04-262024年最好用的10款ER图神器!
- 2024-04-2203-为啥大模型LLM还没能完全替代你?
- 2024-04-2101-大语言模型发展
- 2024-04-17基于SpringWeb MultipartFile文件上传、下载功能
- 2024-04-14个人开发者,Spring Boot 项目如何部署