html

Question

我想#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>

score 143 · Accepted Answer

您需要设置width容器的（auto不起作用）：

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

MDN的 CSS 参考说明了这一切。

查看这些链接：

在jsFiddle行动。

score 47 · Accepted Answer

从技术上讲，您的内部 DIV ( #container)水平居中。您无法判断的原因是因为使用 CSSwidth: auto属性，内部 DIV 正在扩展到与其父级相同的宽度。

看到这个小提琴：http: //jsfiddle.net/UZ4AE/

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

#container在这个例子中，我简单地设置了to的宽度50px并将背景设置为，red这样你就可以看到它是居中的。

我认为真正的问题是“如何使用 CSS 水平居中元素？” 答案是（请打鼓）：这取决于！

当 W3Schools 在这里做得很好时，我不会对使用 CSS 居中的无数方法进行全面重新讨论：http: //www.w3schools.com/css/css_align.asp但基本思想是块级元素您只需指定所需的宽度并将左右边距设置为auto.

.center {
    margin-left: auto;
    margin-right: auto;
    width: 50px;
}

请注意：此答案仅适用于块级元素！要定位内联元素，您需要使用第一个块父级的text-align: center属性。

score 39 · Accepted Answer

另一种有趣的方式：小提琴

CSS

.container {
   background: yellow;
   width: 100%;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
}

.centered-div {
   width: 80%;
   height: 190px;
   margin: 10px;
   padding: 5px;
   background: blue;
   color: white;
}

    <div class="container">
        <div class="centered-div">
            <b>Enjoy</b>
        </div>
    </div>

score 14 · Accepted Answer

您可以使用以下小代码将浮动 div 居中：

#div {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    
    margin-top: -100px;
    margin-left: -100px;
}

score 13 · Accepted Answer

现在只需定义你的

#main_content text-align:center并定义你的 #container display:inline-block;

像这样：

#main_content {
    text-align: center;
}

#container{
    display: inline-block;
    vertical-align: top;
}

score 9 · Accepted Answer

尝试添加

text-align: center;

到您的父容器 CSS 声明。以及子容器的以下内容：

display: inline-block;

它必须做到这一点。

score 4 · Accepted Answer

对于初学者，我会尝试定义更具体的宽度。很难将已经跨越整个宽度的东西居中：

#container {
    width: 400px;
}

score 4 · Accepted Answer

4

用于margin:0 auto;子 div。然后，您可以将子 div 居中在父 div 内。

于 2013-03-13T12:30:58.297 回答

score 4 · Accepted Answer

它可以提供#container div width:80%（任何小于主要内容的宽度并以 % 为单位，以便它从左右两侧都能很好地管理）和提供margin:0px auto; 或 margin:0 auto;（两者都可以正常工作）。

score 4 · Accepted Answer

我在几个项目中使用了以下方法：

https://jsfiddle.net/u3Ln0hm4/

.cellcenterparent{
  width: 100%;
  height: 100%;
  display: table;
}

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

score 3 · Accepted Answer

尝试position:relative;在您的#container. 将精确宽度添加到#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;
}

工作演示

score 3 · Accepted Answer

这是解决方案：

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

score 3 · Accepted Answer

#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进行了实时检查。

score 3 · Accepted Answer

也许你想要这样：

HTML

<div id="main_content">
    <div id="container">vertical aligned text<br />some more text here
    </div>
</div>

CSS

#main_content {
    width: 500px;
    height: 500px;
    background: #2185C5;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#container{
    width: auto;
    height: auto;
    background: white;
    display: inline-block;
    padding: 10px;
}

如何？

在表格单元格中，与中间垂直对齐将设置为元素的垂直居中，并text-align: center;作为元素的水平对齐。

注意到为什么#container 在 inline-block 中，因为这是在行的条件下。

score 3 · Accepted Answer

这是一种使用 Flexbox 显示轻松居中 div 的新方法。

看到这个工作小提琴：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;
}

score 2 · Accepted Answer

每个人都说过，但我想再说一遍不会有什么坏处。

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

http://jsfiddle.net/XUxEC/

score 2 · Accepted Answer

在中心制作一个 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>

score 1 · Accepted Answer

这是因为您的宽度设置为自动。您必须指定宽度才能使其明显居中。

您的#container 跨越#main_content 的整个宽度。这就是为什么它似乎没有居中。

score 1 · Accepted Answer

如果不设置width，它将获得它可以获得的最大宽度。所以你看不到div已经居中。

#container
{
    width: 50%;
    height: auto;
    margin: auto;
    padding: 10px;
    position: relative;
    background-color: black;  /* Just to see the different */
}

score 1 · Accepted Answer

以这种方式制作 CSS 内容...

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

#container {
    height: auto;
    width: 90%;
    margin: 0 auto;
    background-color: #FFF;
    padding: 10px;
}

一个工作示例在这里：http: //jsfiddle.net/golchha21/mjT7t/

score 1 · Accepted Answer

1

如果您不想为设置宽度#container，只需添加

text-align: center;

到#main_content.

于 2013-03-16T22:29:29.983 回答

score 1 · Accepted Answer

如果设置width: auto为块元素，则宽度将为 100%。auto所以在这里拥有价值真的没有多大意义。高度实际上是相同的，因为默认情况下任何元素都设置为自动高度。

所以最后你div#container实际上是居中的，但它只占据了其父元素的整个宽度。您正确居中，您只需更改宽度（如果需要）即可查看它是否真正居中。如果您想将您的#main_content 居中，那么只需应用margin: 0 auto;它即可。

score 1 · Accepted Answer

如果这是你想要的输出，试试这个：

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

#main_content {
    background-color: #2185C5;
    margin: 0 auto;
}

#container {
    width: 100px;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    background: red;
}

score 1 · Accepted Answer

我认为这可以正常工作，尽管您可能需要重置“top:200px;” 根据您的需要：

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

#container {
    width: 100px;
    height: 20px;;
    margin: 0 auto;
    padding-top: 10px;
    position: relative;
    top: 200px;
    border: 2px solid #CCCCCC;
}

score 1 · Accepted Answer

您必须为要居中的 div 分配宽度。

像这样：

#container {
    width: 500;
    margin: 0 auto;
    padding: 10px;
}

有关这些链接的更多信息和示例：

score 1 · Accepted Answer

.parent {
    width: 500px;
    height: 200px;
    border: 2px solid #000;
    display: table-cell;
    vertical-align: middle;
}

#kid {
    width:70%; /* 70% of the parent */
    margin:auto;
    border:2px solid #F00;
    height: 70%;
}

这确实很好地解决了这个问题（在所有新浏览器中测试），其中父 div 有 class="parent" 而子 div 有 id="kid"。

这种风格水平和垂直居中。垂直居中只能使用复杂的技巧来完成——或者通过将父 div 用作表格单元格，这是 HTML 中正确支持垂直对齐的唯一元素之一。

只需设置孩子的高度、边距自动和中间垂直对齐，它就会起作用。这是我所知道的最简单的解决方案。

score 1 · Accepted Answer

* {
  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;
}

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

27 回答 27

CSS

HTML

HTML

CSS

如何？

Related

Reference