让子盒子在父盒子中垂直居中的五个方法_怎么让子盒子根据父盒子居中 - CSDN文库

5星 · 超过95%的资源 16 浏览量更新于2023-05-04 评论 1 收藏 107KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

让子盒子在父盒子中垂直居中的五个方法让子盒子在父盒子中垂直居中的五个方法

一、用一、用padding实现实现

1.padding-top = (父盒子的高度 – 子盒子的高度) / 2

2.padding-left = (父盒子的宽度 – 子盒子的宽度) / 2

3.由于padding会撑大盒子，所以父盒子的宽高要减去对应的padding值

/* 大盒子300*300，小盒子150*100，怎么使小盒子在大盒子里面居中 */

.dad {

/* 300-75=225 */

width: 225px;

/* 300-100=200 */

height: 200px;

background-color: #f34;

/* （300-150）/2=75 */

padding-left: 75px;

/* (300-100)/2=100 */

padding-top: 100px;

}

.son {

width: 150px;

height: 100px;

background-color: #ee9;

}

二、用二、用margin实现实现

1.margin-top = (父盒子的高度 – 子盒子的高度) / 2

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

评论10

牛站长

2023-06-15

这篇文章切入点很好，给出了5种让子盒子在父盒子中垂直居中的方法，非常实用。

weixin_38748556

粉丝: 6
资源: 925

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈