一、盒子垂直居中的方法
1、先让盒子的上下边缘和父盒子的水平中心线重叠,,然后再让子盒子往回移动自身一半的距离
<div class="father">
<div class="son"></div>
</div>
.father {
width: 500px;
height: 500px;
background-color: skyblue;
border: 1px solid #000;
margin: 0 auto;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid #000;
margin-top: 50%;
transform: translateY(-50%);
}
.father {
width: 500px;
height: 500px;
background-color: skyblue;
border: 1px solid #000;
margin: 0 auto;
position: relative;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid #000;
position: absolute;
top: 50%;
margin-top: -100px;
}
2、使用表格的 vertical-align :middle 属性来实现盒子垂直居中
.father {
width: 500px;
height: 500px;
background-color: skyblue;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid #000;
}
3、知道父盒子的高度,可以使用 margin 计算盒子的上下边距,来使盒子居中
.father {
width: 500px;
height: 500px;
background-color: skyblue;
border: 1px solid #000;
margin: 50px auto;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid #000;
margin-top: 149px; // 根据父盒子的高度指定 margin-top 即可
}
二、盒子水平居中的方法
1、使用 margin: 0 auto;
.father {
width: 500px;
height: 500px;
background-color: skyblue;
border: 1px solid #000;
margin: 50px auto;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid #000;
margin: 0 auto; // 让盒子左右自动适应,想当于 left:auto; right:auto
}
2、通过计算 margin 左右边距来实现居中
.father {
width: 500px;
height: 500px;
background-color: skyblue;
border: 1px solid #000;
margin: 50px auto;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid #000;
margin-left: 149px; // 父盒子的定宽的,指定 margin-left 即可
}
3、先让盒子左右边缘和父盒子垂直的中心线垂直,然后把子盒子往回移动自身宽度的一半
.father {
width: 500px;
height: 500px;
background-color: skyblue;
border: 1px solid #000;
margin: 50px auto;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid #000;
margin-left: 50%;
transform: translateX(-50%);
}
.father {
width: 500px;
height: 500px;
background-color: skyblue;
border: 1px solid #000;
margin: 50px auto;
position: relative;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid #000;
position: absolute;
left: 50%;
margin-left: -100px;
}
4、把盒子转成 行内块,然后用 text-align 属性使盒子水平居中
.father {
width: 500px;
height: 500px;
background-color: skyblue;
border: 1px solid #000;
margin: 50px auto;
text-align: center;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid #000;
display: inline-block;
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库