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

#让子盒子在父盒子中垂直居中的七个方法| 来源: 网络整理| 查看: 265

一、用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 2.margin-left = (父盒子的宽度 - 子盒子的宽度) / 2 3.子盒子加margin-top会使父盒子产生塌陷，需要解决塌陷问题

盒子垂直居中 /* 大盒子300*300，小盒子150*100，怎么使小盒子在大盒子里面居中 */ .dad { /* 嵌套的盒子中，子盒子的margin-top会产生塌陷 */ overflow: hidden; width: 300px; height: 300px; background-color: #f34; } .son { width: 150px; height: 100px; /* (300-100)/2 */ margin-top: 100px; /* (300-150)/2 */ margin-left: 75px; background-color: #ee9; }

在这里插入图片描述

三、text-align+margin

1.先利用text-align:center;时盒子水平居中。 2.由于text-align不能是块级元素水平居中，所以要对子盒子进行类型转换。 3.再利用margin实现垂直居中

盒子垂直居中 /* 大盒子300*300，小盒子150*100，怎么使小盒子在大盒子里面居中 */ .dad { width: 300px; height: 300px; background-color: #f34; /* 让除了块级元素以外的元素水平居中 */ text-align: center; } .son { /* 转为行内块元素 */ display: inline-block; /* (300-100)/2 */ margin-top: 100px; width: 150px; height: 100px; background-color: #ee9; }

在这里插入图片描述

四、利用定位使用定位+auto /* 大盒子300*300，小盒子150*100，怎么使小盒子在大盒子里面居中 */ .dad { /* 父相 */ position: relative; width: 300px; height: 300px; background-color: #f34; } .son { /* 子绝 */ position: absolute; /* 先向下偏移父盒子高度的一半，此时子盒子的上边线垂直居中于父盒子 */ top: 50%; /* 再向上移动自身高度的一半 */ margin-top: -50px; /* 先向右偏移父盒子宽度的一半，此时子盒子的左边线水平居中于父盒子 */ left: 50%; /* 再向右移动自身宽度的一半 */ margin-left: -75px; width: 150px; height: 100px; background-color: #ee9; }

在这里插入图片描述

五、利用定位-auto

1.利用子绝父相定位，再使子盒子上下左右的距离都为0 2.margin:auto;一般情况下只能使盒子水平居中，但当子盒子上下左右距离都为0，此时可实现盒子垂直水平居中的效果。 3.且此时，无论父盒子和子盒子宽高如何改变，子盒子都是垂直居中的。

使用定位+auto /* 大盒子300*300，小盒子150*100，怎么使小盒子在大盒子里面居中 */ .dad { /* 父相 */ position: relative; width: 300px; height: 300px; background-color: #f34; } .son { /* 子绝 */ position: absolute; /* 让盒子边偏移上下左右值都为0，再利用margin：auto来实现水平垂直都居中 */ top: 0; bottom: 0; left: 0; right: 0; margin: auto; /* 此时，无论盒子大小如何改变，都是水平垂直居中 */ width: 150px; height: 100px; background-color: #ee9; }

在这里插入图片描述

六、利用定位+translate

1.利用定位让子盒子右移父亲宽度的一半，下移父亲高度的一半。 2.再用translate左移自身宽度的一半，上移自身宽度的一半。

移动 * { margin: 0; padding: 0; } .box4 { width: 100px; height: 100px; position: relative; background-color: #faf634; transform: translate(100px, 100px); } /* 让box5在box4 中水平垂直居中 */ .box5 { position: absolute; left: 50%; top: 50%; /* 此时盒子的上边垂直居中于父盒子，左边水平居中于父盒子，只需要向上和向左走自身宽度的一半即可垂直水平居中 */ /* 由于x轴值越大就是向右，y轴值越大就是向下，所里向左和向上是负号 */ transform: translate(-50%, -50%); width: 50px; height: 50px; background-color: green; } 七、flex布局实现

1.让子项在主轴上居中，在侧轴上居中就行了。

Document .box1 { display: flex; width: 300px; height: 300px; align-items: center; justify-content: center; background-color: #f34; } .box2 { width: 100px; height: 100px; background-color: #09f; } 分享完毕，不妥之处，敬请批评指正，谢谢大家！

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章