CSS之left：50%、margin-left：50%写法的bug和解决⼤家好，我是梅巴哥er。本篇⼀起来看⼀个关于left: 50%; 和 margin-left: 50%；写法产⽣的bug和解决⽅法。
产品需求
我们需要⼀个居中的盒⼦，底⾊是蓝⾊，⽔平居中放置，宽度随着字数做⾃适应调整。
发现bug
于是，我们就根据需求，来写这样⼀段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"content="IE=edge">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
position: relative;
width: 300px;
height: 80px;
background-color: pink;
}
.box1{
margin-left: 50%;
transform:translateX(-50%);
height: 30px;
background-color: blue;
color: #fff;
text-align: center;
line-height: 30px;
padding: 0 8px;
border-radius: 12px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">这是⽂字</div>
</div>
</body>
</html>
然后，我们得到⼀个这样的结果：
好像达到了想要的效果。
但是呢，这时候产品说了，我们的⽂字会⽐较长⽐较长⽐较长…
所以，我们按照产品的要求，把⽂字内容增加了⼀下，然后：
我们就得到了这样的效果。
咦，怎么回事？ 盒⼦确实是居中了，但是并没有⾃适应啊！what？！
思考问题
习惯性的打开F12， 查看盒⼦布局情况，看看问题出在了哪⾥。
看这个图，可以发现， ⽗盒⼦宽度是300px，⽽我们的⼦盒⼦宽度是根据⽂字来⾃适应的，并没有给宽度，当我们使⽤了margin-left: 50%；的时候，⼦盒⼦的宽度⾃动默认为⽗盒⼦宽度的⼀半。⽂字内容超出了⼀半的宽度，就被挤下去了。 嗖嘎， 问题到了。
解决bug
既然是在使⽤margin-left: 50%；的时候，没有宽度的⼦盒⼦被给了⼀个默认⾼度。那么，我们可以不适⽤这个css属性。想想我们居中还有flex这个更好⽤的属性。所以，我们把代码修改⼀下，给⾃适应的⼦盒⼦加⼀个⽗盒⼦，再给这个⽗盒⼦加上宽度和flex属性。让⼦盒⼦居中即可。
代码如下：
<meta http-equiv="X-UA-Compatible"content="IE=edge">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
position: relative;
width: 300px;
height: 80px;
background-color: pink;
}
.addBox{
width: 100%;
height: 30px;
display: flex;
justify-content: center;
}
.
box1{
/* margin-left: 50%;
transform: translateX(-50%); */
height: 100%;
background-color: blue;
color: #fff;
text-align: center;
line-height: 30px;
padding: 0 8px;
border-radius: 12px;
}
</style>
</head>
<body>
<div class="box">
<div class="addBox">
<div class="box1">这是⼀段要⾃适应的居中⽂字</div>
</div>
</div>
</body>
</html>
然后就得到了这样的效果：
再增加⽂字个数来看看：
完美解决。
left: 50%；的情况
另外，left: 50%；同样会出现这种bug 。解决⽅法也是相同的。思路和上述思路也⼀样。 这⾥附上⼀段绝对定位下实现上述需求的demo 。
<meta http-equiv="X-UA-Compatible"content="IE=edge">
<meta name="viewport"content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style>
.box{
position: relative;
width: 300px;
height: 80px;
background-color: pink;
}
.addBox{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30px;
display: flex;
justify-content: center;
}
cssclass属性
.box1{
height: 100%;
background-color: blue;
color: #fff;
text-align: center;
line-height: 30px;
padding: 0 8px;
border-radius: 12px;
}
</style>
</head>
<body>
<div class="box">
<div class="addBox">
<div class="box1">这是⼀段要⾃适应的居中⽂字</div>
</div>
</div>
</body>
</html>
同样实现了上述需求：

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