Question

<div id="container">
   <div id="div1">
      <div id="div2"></div>
   </div>
</div>

我希望div 2位于div1的中心，无论如何，div2宽度不会改变多少。 atm div2只能在容器宽度的中心。我怎样才能做到这一点？ JS是最后一种方式吗？

Answer 1

CSS flexbox使用$(document).ready(function() { var delid = ''; //global variable $('#removeUser').on('show.bs.modal', function(e) { delid = $(e.relatedTarget).data('id'); //fetch value of `data-id` attribute load it to global variable alert(delid); }); $('#remove-button').click(function() { alert(delid); //Use the global variable here to del the record //Do what ever you like to do //$.post('/API/removeUser', {} ); }); });和justify-content属性执行此操作。

将类似align-items的类设置为：

bullseye

然后将该类添加到您的.bullseye { display: flex; justify-content: center; align-items: center; }元素：

div1

摆弄它：
https://jsfiddle.net/1rd6tcra/

文档：
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

Answer 2

你给外部div一个宽度，你给内部的一个宽度为0自动。

#container{
width: 100px;
}

#div1{
margin: 0 auto;
}

Answer 3

检查以下代码

<div id="container">
   <div id="div1" style="width:100%;border:1px solid #F00;">
      <div id="div2" style="width:60%;border:1px solid #F0F;">
        here is my div2
      </div>
   </div>
</div>

确保你的内部div具有一定的宽度，无论父级的宽度如何都无关紧要。

css代码在

之下

#div2{
  margin:auto;
}

您可以查看this fiddle

Answer 4

现代的做法是：

#div1 {
  position: relative:
}
#div2 {
  position: relative;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

如何将div放在另一个div中？

4 个答案: