通过css使div标签居中显⽰
通过css使div标签居中显⽰
不知道标签的宽度⾼度时：
.box {
border-radius: 5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.4);
padding: 15px 15px;
}
<div class="box">我不知道宽度|⾼度</div>
如图：添加transform: translate(-50%, -50%)与没有添加transform: translate位置对⽐：
从图可以看出transform: translate(-50%, -50%)的作⽤是让盒⼦本⾝向左，向上平移⾃⾝的50%的宽度，⾼度
知道标签的宽度，⾼度时：
.box {
border-radius: 5px;
position: absolute;
width: 200px;
height: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.4);
padding: 15px 15px;
}
<div class="box">我知道宽度:200|⾼度:150</div>
也可以使⽤top,left:50%，配合：transform: translate(-50%, -50%);
.box {
border-radius: 5px;
position: absolute;
width: 200px;
height: 150px;
top: 50%;
left: 50%;
margin-left: -115px;/*(width/2)+padding-left*/
margin-top: -90px;/*(height/2)+padding-top*/
background-color: rgba(0, 0, 0, 0.4);
padding: 15px 15px;
}
<div class="box">我知道宽度:200|⾼度:150</div>
使⽤top,left:50%，配合margin-left，margin-top时，如果盒⼦设置内边距则需要加上内边距的⼤⼩，如果没有内边距则直接是盒⼦⾼度，宽度的⼆分之⼀
知道⼀个⼤盒⼦的宽度，⾼度，在⼤盒⼦内设置⼩盒⼦居中：
a.知道⼩盒⼦⾼度，宽度
.box {
border: 1px solid red;
width: 600px;
height: 500px;
margin: auto;
position: relative;
}
.child-box{
border:1px solid blue;
width: 100px;
height: 100px;
margin: 200px auto;
}
<div class="box">
<div class="child-box">我知道⾼度，宽度</div>
</div>
b.不知道⼩盒⼦宽度，⾼度
.box {
border: 1px solid red;
width: 600px;
height: 500px;
margin: auto;borderbox
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.child-box{
border:1px solid blue;
}
<div class="box">
<div class="child-box">我不知道⾼度，宽度</div>
</div>
也可以配合transform：translate
.box {
border: 1px solid red;
width: 600px;
height: 500px;
margin: auto;
position: relative;
}
.child-box {
border: 1px solid blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="box">
<div class="child-box">我不知道⾼度，宽度</div>
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。