如何在另一个 div 中居中一个 div？ [复制]答案

【问题标题】：How can I center a div within another div? [duplicate]如何在另一个 div 中居中一个 div？ [复制]
【发布时间】：2013-02-28 21:00:41
【问题描述】：

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

【问题讨论】：

尝试获取position:relative;in你#container
您正在测试哪些浏览器？这是您的代码的一个小提琴，它在最新的 chrome 上运行良好：jsfiddle.net/mFwCp
水平、垂直或两者兼而有之？
精选于a YouTube video。
只需将容器 div 设置为 display: flex，将内部 div 设置为 margin: auto 和 position: relative

标签： html css

【解决方案1】：

需要设置容器的width（auto不行）：

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

MDN 的 CSS 参考说明了一切。

查看这些链接：

在行动at jsFiddle。

【讨论】：

这不是解决方案。它仅将容器水平居中。不是垂直的！
将 flex 与 "justify-content: center; align-items: center;" 一起使用是另一种选择
但你必须显示：flex;如果你想使用上面直接提到的解决方案。

【解决方案2】：

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

#container {
    width: 400px;
}

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

尝试在您的#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

【讨论】：

【解决方案5】：

尝试添加

text-align: center;

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

display: inline-block;

它必须做到这一点。

【讨论】：

【解决方案6】：

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

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

【讨论】：

看看有什么不同？

【解决方案7】：

现在只需定义你的

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

像这样：

#main_content {
    text-align: center;
}

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

【讨论】：

它应该添加 text-align: center 到容器和 display:inline-block 到子 div 或 main_content。

【解决方案8】：

解决办法如下：

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

【讨论】：

【解决方案9】：

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

试试这个。它测试正常。有一个实时检查on jsfiddle。

【讨论】：

【解决方案10】：

也许你想要这样：

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 中，因为这是在行的条件下。

【讨论】：

【解决方案11】：

对子 div 使用 margin:0 auto;。然后你可以在父 div 中居中子 div。

【讨论】：

【解决方案12】：

每个人都说过，但我想再说一遍也无妨。

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

http://jsfiddle.net/XUxEC/

【讨论】：

【解决方案13】：

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

【讨论】：

【解决方案14】：

以这种方式制作 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/

【讨论】：

【解决方案15】：

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

text-align: center;

到#main_content。

【讨论】：

这不适用于position:relative; - 当然，它将使内容居中，但不是 div 本身。

【解决方案16】：

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

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

【讨论】：

【解决方案17】：

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

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

【讨论】：

【解决方案18】：

从技术上讲，您的内部 DIV (#container) 水平居中。你不知道的原因是因为使用 CSS width: auto 属性，内部 DIV 正在扩展到与其父级相同的宽度。

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

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

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

我认为真正的问题是“如何使用 CSS 水平居中元素？”答案是（请打鼓）：视情况而定！

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

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

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

【讨论】：

【解决方案19】：

我认为这会很好，但您可能需要重置“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;
}

【讨论】：

【解决方案20】：

您必须为要居中的 div 指定宽度。

像这样：

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

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

【讨论】：

【解决方案21】：

你可以用这个小代码将浮动 div 居中：

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

【讨论】：

这实际上是唯一正确的解决方案。所有其他几乎都将内部 div 水平居中。这也是您垂直居中内部 div 的方式。唯一更正：位置：绝对； // 不显示...
@PeterMortensen 我不同意这个编辑；我相信作者的意思是“中心浮动”，就像以浮动的方式简单地“居中”一个 div，而不是使一个已经分配了 float 属性的 div 居中。虽然更重要的是，这个问题的答案根本不应该被编辑，真的。

【解决方案22】：

.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 中正确支持垂直对齐的唯一元素之一。

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

【讨论】：

【解决方案23】：

另一种有趣的方式：fiddle

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

HTML

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

【讨论】：

【解决方案24】：

在中心创建一个 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>

【讨论】：

【解决方案25】：

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

https://jsfiddle.net/u3Ln0hm4/

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

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

【讨论】：

【解决方案26】：

这是一种使用 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;
}

【讨论】：

【解决方案27】：

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

【讨论】：