1：小div在大div里面如何居中：通过百分比
关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种，下面仅列举了常用的几种。
首先看一下要实现的效果图及对应的html代码：
<div class=”parent”>
<div class=”child”>
</div></div>
方法一：使用定位的方法
.parent {
width: 300px;
height: 200px;
border: 1px solid red;
position:relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid violet;
position:absolute;
top: 50%;
left:50%;
margin-top: -50px; /*这里是小盒子高的一半*/
margin-left: -50px; /*这里是小盒子宽的一半*/
}
使用定位方法,需要知道子元素的宽高,但是不需要知道父元素的宽高.
方法二:利用定位及margin:auto实现
.parent {
width: 300px;
height: 200px;
border: 1px solid red;
position:relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid violet;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
实现原理是设置margin自动适应,然后设置定位的上下左右都为0,就如四边均衡受力从而实现盒子的居中;
方法三:使用display:table-cell;
.parent {
width: 300px;
height: 200px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child {
width: 100px;
height: 100px;
border: 1px solid violet;
display: inline-block;
}
实现原理:
display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签.
组合使用vertical-align,text-align,可以使父元素内的所有行内元素水平垂直居中（也就是将内部的元素设置display:inline-block）
方法四:使用伸缩布局display:flex
.parent {
width: 300px;
height: 200px;
border: 1px solid red;
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
.child {
width: 100px;
height: 100px;
border: 1px solid violet;
}
方法五:计算四周的间距设置子元素与父元素之间的margin-top和margin-left;
.parent {
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 100px;
height: 100px;
border: 1px solid violet;
margin-top: 50px;
margin-left: 100px;
}
最后这种方法需要同时知道父元素与子元素的宽高,不方便日后的维护.
今天的文章div居中问题分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/28470.html
