CSS之left:50% 、 margin-left: 50%写法的bug和解决

最新推荐文章于 2023-04-25 15:14:17 发布

新生代农民工官方认证码农小拽

最新推荐文章于 2023-04-25 15:14:17 发布

阅读量2.6k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/tuzi007a/article/details/118726410

版权

CSS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

大家好，我是梅巴哥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属性。让子盒子居中即可。

代码如下：

<!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;
    }
    .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 。

<!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;
    }
    .addBox {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: center;
    }
    .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>