如何将div定位在另一个div中？ [英] How can I center a div within another div?

问题描述

我有问题。我有这样的html代码：

I've got an problem. I have the html code like this:

<div id="main_content" >
    <div id="container">
    </div>
</div>

css像这样：

#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;
}

我假设#container将在#main_content内居中。然而，它不是。我只想知道原因和如何使它居中。

I suppose that the #container will be centered within #main_content. However, it is not. I just want to find out the reason and how to make it centered.

推荐答案

您需要设置容器的宽度。 （ auto 将无法使用）

You need to set the width of the container. (auto won't work)

#container {
    width: 640px; /*can be in percentage also.*/
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

The CSS reference by MDN explains it all.

查看这些链接

• auto-CSS参考| MDN


• margin - CSS参考| MDN


• 含义CSS属性中的 auto 值 - StackOverflow

• auto - CSS reference | MDN
• margin - CSS reference | MDN
• What is the meaning of auto value in a CSS property - StackOverflow

strong>更新 - 操作中@ jsFiddle

Update - In action @ jsFiddle

这篇关于如何将div定位在另一个div中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！