Html 带translateX和overflow的中心绝对定位div：自动，不带边距_Html_Css_Css Position

Html 带translateX和overflow的中心绝对定位div：自动，不带边距

html css

Html 带translateX和overflow的中心绝对定位div：自动，不带边距,html,css,css-position,Html,Css,Css Position,我正在尝试一种非常简单的方法来居中并保留div的完整大小，但没有成功，请看以下片段： *{ 框大小：边框框； } .身体{ 宽度：400px；高度：100px；浮动：左；右边距：20px；位置：相对位置； } .身体小一点{ 宽度：200px； } .集装箱{ 排名：0；左：0；右：0；底部：0；位置：绝对位置；溢出：自动；边框：2件纯蓝； } .孩子{ 宽度：300px；高度：1000px；位置：绝对位置；左：50%；转化：translateX（-50%）；边框

我正在尝试一种非常简单的方法来居中并保留div的完整大小，但没有成功，请看以下片段：

*{
框大小：边框框；
}
.身体{
宽度：400px；
高度：100px；
浮动：左；
右边距：20px；
位置：相对位置；
}
.身体小一点{
宽度：200px；
}
.集装箱{
排名：0；
左：0；
右：0；
底部：0；
位置：绝对位置；
溢出：自动；
边框：2件纯蓝；
}
.孩子{
宽度：300px；
高度：1000px；
位置：绝对位置；
左：50%；
转化：translateX（-50%）；
边框：2倍纯绿；
}

试试这个：

*{
框大小：边框框；
}
.身体{
宽度：400px；
高度：100px；
浮动：左；
右边距：20px；
位置：相对位置；
}
.身体小一点{
宽度：200px；
}
.集装箱{
排名：0；
左：0；
右：0；
底部：0；
位置：绝对位置；
溢出：自动；
边框：2件纯蓝；
}
.孩子{
//宽度：300px；
宽度：80%；
高度：1000px；
位置：绝对位置；
//左：50%；
左：10%；
//转化：translateX（-50%）；
边框：2倍纯绿；
}

滚动条无法显示右边距，因此您可以在缩放后将其删除

    <head>
    </head>
    <style>
     * {
      box-sizing: border-box;
    }

    .body {
      width: 400px;
      height: 100px;
      
      float: left;
      
      margin-right: 20px;

      position: relative;
    }

    .body.smaller {
      width: 200px;
    }

    .container {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      
      position: absolute;
      
      overflow: auto;

      
      border: 2px solid blue;
    }

    .child {
      display: block;
      
      width: 300px;
      height: 1000px;
      
      margin: 0 auto;
      
      border: 2px solid green;

      transform-origin: 0 0;
    }
    </style>

    <body>
    <div class="body">
      <div class="container">
        <div class="child">Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Optio sequi quos amet, doloremque earum assumenda sapiente recusandae explicabo fuga, sed provident! Aspernatur ex neque maiores voluptatibus reprehenderit! At, quasi laboriosam.</div>
      </div>
    </div>

    <div class="body smaller">
      <div class="container">
        <div class="child">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius iusto numquam, autem eligendi voluptas ab qui id soluta voluptatum molestias sapiente dignissimos enim illo, impedit omnis tempore, corporis, ipsam accusantium.</div>
      </div>
    </div>

    <button onclick="scale()">Scale</button>
    <script type="text/javascript">
        
        function scale() {
        let children = document.getElementsByClassName('child');
      for (let i = 0; i < children.length; i++) {
        children[i].style.transform = 'scale(3)';
        // Remove the margin 
        children[i].style.margin = '0';  
      }
    }
    </script>
    </body>

    </html>


* {
框大小：边框框；
}
.身体{
宽度：400px；
高度：100px；
浮动：左；
右边距：20px；
位置：相对位置；
}
.身体小一点{
宽度：200px；
}
.集装箱{
排名：0；
左：0；
右：0；
底部：0；
位置：绝对位置；
溢出：自动；
边框：2件纯蓝；
}
.孩子{
显示：块；
宽度：300px；
高度：1000px；
保证金：0自动；
边框：2倍纯绿；
变换原点：0；
}
Lorem，ipsum dolor坐在amet Concertetur，告别精英。选择权如下：我们应该为我们的智者解释一下，这是天意！这是我的荣幸！在，准laboriosam。
我的同僚们都是精英。因此，我们需要一种新的解决方案，即全时性、实体性和累积性的障碍。
规模
功能量表（）{
让children=document.getElementsByClassName（'child'）；
for（设i=0；i

左：0；右：0；保证金：自动是这里的方法。你的翻译不走运我不能使用任何边距作为问题，因此没有边距是不可能的？问题是为什么你不能使用边距：auto？你可以自己试试，试试这个小提琴：我应该注意到什么？子div应该有这个大小作为示例，不能是100%
，不幸的是，对于第二个解决方案，不幸的是，它不起作用，请提供完整的示例，如果您看到更新的问题，如果我使用justify content
方法将子div居中，如果您缩放容器，滚动条也将显示一个空格…请在此处查找flex示例：与translateX
one相同…使用第二个代码段，并使用javascript子项[i]添加或删除边距。style.margin='0'；然后如果你调整浏览器的大小，你会得到错误的边距：）认为400px的.body
只是一个适合视图的示例，通常是100%
，无论如何，我认为实现这一点的唯一方法是使用一些JavaScript。不，是不正确的不幸的是，孩子应该留在300px
，以获得正确的示例问题