<style>
#root{ /*父元素*/
width: 500px;
height: 500px;
display: table;
}
#root .no1{ /*子元素*/
display: table-cell;
vertical-align: middle; /*上下居中*/
text-align: center; /*左右居中*/
}
</style>
<div id="root">
<div class="no1">1</div>
</div>
<style>
#root{
width: 500px;
line-height: 500px;
background-color: red;
}
#root .no1{
width: 100%;
display: inline-block;
vertical-align: middle;
text-align: center;
}
</style>
<div id="root">
<div class="no1">1</div>
</div>
<style>
#root{
width: 500px;
height: 500px;
position: relative;
background-color: red;
}
#root .no1{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<div id="root">
<div class="no1">1</div>
</div>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
2023-03-18 React 实现 动态加载组件