Html 如何将一个div置于另一个div的中心，最简单的方法是什么？

我正试图把一个蓝色的盒子完美地放在它的父div的中间，我想确保我用最简单的方法来做这件事。我必须做一些简单的数学来知道px设置蓝色框的宽度和高度，只是想看看是否有更简单的方法。例如，要使一个div的宽度居中，我可以做“margin:auto”，高度是否有类似的设置

这是小提琴：

我的css代码如下：

#container {
 width: 500px;
 height: 500px;
 background-color: lightgreen;
 margin: 0 auto;
 position: relative;
}

#box1 {
 width: 50px;
 height: 50px;
 background-color: red;
 position: absolute;
 right: 0;
}

#box2 {
 width: 50px;
 height: 50px;
 background-color: blue;
 margin: auto;
 margin-top: 225px;
 margin-left: 225px;
 position: absolute;    
}

---

最简单的方法？Flexbox。不适用于IE 10或更低版本，并且我没有包含供应商前缀：

#外部{
背景：红色；
宽度：400px；
高度：400px；
display:flex；/*这三行实现了神奇的效果*/
证明内容：中心；
对齐项目：居中；
}
#内在的{
宽度：200px；
高度：200px；
背景：蓝色；
}

乱数假文

如果您只想水平和垂直居中一些文本，您应该将父级文本对齐设置为居中，并且它的行高设置为父级的高度

#container {
    width: 500px;
    height: 500px;
    background-color: lightgreen;
    margin: 0 auto;
    line-height: 500px;
    text-align: center;
}

#box1 {
    display: inline;
    width: 50px;
    height: 50px;
}

---

如果容器是相对的：

    #box1 {
      width: 50px;
      height: 50px;
      background-color: red;
      overflow: auto;
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }

---

更新的fiddle:

您可以不用CSS，只需使用jQuery：

var container = $('#container');
$('#container div').each(function () {
    var $this = $(this);
    var top = (container.width() / 2) - $this.width() / 2;
    var left = (container.height() / 2) - $this.width() / 2;
    $this.css({
        top: top,
        left: left
    });
});

---

只需使用

页边距：0自动。不需要数学，它会在中心。不需要复杂的东西。确保它是框CSS上唯一的边距属性

所以这会引起一些问题

margin: 0 auto;
margin-left: 10px;
margin: right: 10px;

只是有

margin: 0 auto;

哇，我以前从未见过，好吧。为什么要用jQuery来做一些可以在CSS中轻松完成的事情呢？我没有否决任何东西，我不能，我只有54个代表。