logo标签列表

如何在一个div中居中另一个div？

htmlcss
204

我认为#container会在#main_content中居中显示。但实际上没有居中。为什么不起作用，我该如何修复？

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

#container {
  width: auto;
  height: auto;
  margin: 0 auto;
  padding: 10px;
  position: relative;
}
<div id="main_content">
  <div id="container">
  </div>
</div>

尝试在你的#container中加入position:relative;。 - jhunlio
2
你测试在哪些浏览器上？这里有一个 jsFiddle，你的代码在最新的 Chrome 上可以正常工作：http://jsfiddle.net/mFwCp/ - gion_13
1
横向、纵向还是两者都要？ - icktoofay
4
在 一个 YouTube 视频 中展示。 - Peter Mortensen
3
只需将容器 div 设置为 display: flex，内部 div 设置为 margin: auto 和 position: relative。 - Masciuniria
27个回答
4
我在几个项目中使用了以下方法： https://jsfiddle.net/u3Ln0hm4/ 
.cellcenterparent{
  width: 100%;
  height: 100%;
  display: table;
}

.cellcentercontent{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
3
尝试在你的#container中添加position:relative;。给#container添加一个确切的宽度:
#main_content {
    top: 160px;
    left: 160px;
    width: 800px;
    min-height: 500px;
    height: auto;
    background-color: #2185C5;
    position: relative;
}

#container {
    width: 600px;
    height: auto;
    margin: auto;
    padding: 10px;
}

Working demo

3
这里是解决方案：
#main_content {
    background-color: #2185C5;
    height: auto;
    margin: 0 auto;
    min-height: 500px;
    position: relative;
    width: 800px;
}
3
#main_content {
    width: 400px;
    margin: 0 auto;
    min-height: 300px;
    height: auto;
    background-color: #2185C5;
    position: relative;
}

#container {
    width: 50%;
    height: auto;
    margin: 0 auto;
    background-color: #CCC;
    padding: 10px;
    position: relative;
}

试试这个。它经过测试没问题。在 jsfiddle 上有一个实时检查 链接。

3

这里是使用Flexbox显示的一种新方法，可以轻松居中你的

标签。

查看运行示例：https://jsfiddle.net/5u0y5qL2/

以下是CSS代码：

.layout-row {
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.layout-align-center-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-grid-row-align: center;
    align-items: center;
    -webkit-align-content: center;
    align-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
2
将div居中。不需要分配div的宽度。
这里有一个可工作的演示：

http://jsfiddle.net/6yukdmwq/

    .container {
        width: 100%;
        height: 500px;
        display: table;
        border: 1px solid red;
        text-align: center;}

    .center {
        display: table-cell;
        vertical-align: middle;
    }

    .content {
        display: inline-block;
        text-align: center;
        border: 1px solid green;
    }


    <section class="container">
        <div class="center">
            <div class="content">
                <h1>Helllo Center Text</h1>
            </div>
        </div>
    </section>
2

大家都说过了，但我觉得再说一遍也无妨。

你需要将width设为某个值。这里有一个更简单易懂的示例：

http://jsfiddle.net/XUxEC/

1
* {
  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;
}
1
因为你的宽度设置为自动，所以需要指定宽度才能使其居中可见。
你的 #container 跨越了整个 #main_content 的宽度，这就是为什么它看起来没有居中。
1
没有设置 width，它会获得最大的宽度。因此，你无法看到 div 已经居中了。
#container
{
    width: 50%;
    height: auto;
    margin: auto;
    padding: 10px;
    position: relative;
    background-color: black;  /* Just to see the different */
}
看到了什么不同？ - Peter Mortensen
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接