Html 如何将一个div集中在另一个div中？

我假设

#容器

将以

#主内容

为中心。然而，事实并非如此。为什么这不起作用，我怎样才能修复它

#主要内容{
顶部：160px；
左：160像素；
宽度：800px；
最小高度：500px；
高度：自动；
背景色：#2185C5；
位置：相对位置；
}
#容器{
宽度：自动；
高度：自动；
保证金：0自动；
填充：10px；
位置：相对位置；
}

---

您需要设置容器的宽度（

auto

不起作用）：

#容器{
宽度：640px；/*也可以是百分比*/
高度：自动；
保证金：0自动；
填充：10px；
位置：相对位置；
}

CSS引用解释了这一切

查看以下链接：

---

首先，我会尝试定义一个更具体的宽度。很难将已经跨越整个宽度的物体居中：

#容器{
宽度：400px；
}

这是因为您的宽度设置为自动。必须指定宽度，使其可见居中

---

您的#容器跨越了#主内容的整个宽度。这就是为什么它看起来不居中。

尝试获取

位置：相对#容器中
。将精确宽度添加到
#容器中
：

#主要内容{
顶部：160px；
左：160像素；
宽度：800px；
最小高度：500px；
高度：自动；
背景色：#2185C5；
位置：相对位置；
}
#容器{
宽度：600px；
高度：自动；
保证金：自动；
填充：10px；
}

尝试添加

文本对齐：居中；

到父容器CSS声明。并将以下内容添加到子容器：

显示：内联块；

它必须做到这一点。
如果不设置
宽度，它将获得最大宽度。因此，您无法看到
div
已居中

#容器
{
宽度：50%；
高度：自动；
保证金：自动；
填充：10px；
位置：相对位置；
背景色：黑色；/*只是为了看到不同的颜色*/
}
现在只需定义您的

#主要内容
文本对齐：居中
和定义您的
#容器
显示：内联块

就这样:

#主要内容{
文本对齐：居中；
}
#容器{
显示：内联块；
垂直对齐：顶部；
}
以下是解决方案：

#主要内容{
背景色：#2185C5；
高度：自动；
保证金：0自动；
最小高度：500px；
位置：相对位置；
宽度：800px；
}
#主要内容{
宽度：400px；
保证金：0自动；
最小高度：300px；
高度：自动；
背景色：#2185C5；
位置：相对位置；
}
#容器{
宽度：50%；
高度：自动；
保证金：0自动；
背景色：#CCC；
填充：10px；
位置：相对位置；
}

试试这个。它测试正常。有一张实时支票。
也许你想要这样：

HTML

垂直对齐文本
此处还有一些文本

CSS
#主要内容{
宽度：500px；
高度：500px；
背景#2185C5；
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
}
#容器{
宽度：自动；
高度：自动；
背景：白色；
显示：内联块；
填充：10px；
}

怎么用？
在表格单元格中，“垂直对齐中间”将设置为与元素垂直居中，并且
文本对齐：居中用作图元的水平对齐方式

注意到为什么是#容器在内联块中，因为这是在行的条件下。
使用
边距：0自动到子div。然后你可以将子div放在父div的中心。
每个人都这么说了，但我想再说一遍也不会有什么坏处

您需要将
宽度设置为某个值。这里有一些更容易理解的东西

它可以使
#容器分区宽度为80%
（任何小于主要内容的宽度，并以%表示，以便它从左到右都能很好地管理）并使
边距为0px或
边距：0自动（两者都很好）。
以这种方式制作CSS内容

#主要内容{
顶部：160px；
左：160像素；
宽度：自动；
最小高度：500px；
高度：自动；
背景色：#2185C5；
位置：相对位置；
}
#容器{
高度：自动；
宽度：90%；
保证金：0自动；
背景色：#FFF；
填充：10px；
}

这里有一个工作示例：
如果不想为
#容器设置宽度，只需添加

文本对齐：居中；

到
#main_content
如果将
宽度：auto
设置为块元素，则宽度将为100%。因此，在这里设置
auto
值没有多大意义。高度实际上是相同的，因为默认情况下，任何元素都设置为自动高度

最后，您的
div#container
实际上是居中的，但它只占据其父元素的整个宽度。你做对中，你只需要改变宽度（如果需要的话），看看它是真的对中。如果你想把你的#主要"内容放在中心位置，那么只需应用
margin:0 auto。
如果这是您想要的输出，请尝试此选项：



#主要内容{
背景色：#2185C5；
保证金：0自动；
}
#容器{
宽度：100px；
高度：自动；
保证金：0自动；
填充：10px；
背景：红色；
}
从技术上讲，您的内部DIV（
#container
）水平居中。您无法分辨的原因是，使用CSS
width:auto
属性，内部DIV正在扩展到与其父级相同的宽度

硒
* {
  box-sizing: border-box;
}

#main_content {
  top: 160px;
  left: 160px;
  width: 800px;
  min-height: 500px;
  height: auto;
  background-color: #2185c5;
  position: relative;
}

#container {
  width: 50%;
  height: 50%;
  margin: auto;
  padding: 10px;
  position: absolute;
  border: 5px solid yellow;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}