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

我认为 #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>

552235 次浏览
小开
最佳答案

您需要设置容器的 width(auto不起作用) :

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

MDN的 CSS 引用解释了这一切。

查看以下连结:

行动 在 jsFiddle。

小开

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

#container {
width: 400px;
}
小开

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

您的 # 容器跨越了 # main _ content 的整个宽度，这就是为什么它看起来不居中的原因。

小开

尝试获得 #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;
}

正在演示

小开

试着加上

text-align: center;

以及下面的子容器:

display: inline-block;

一定有用。

小开

不设置 width，它将得到它能得到的最大宽度。所以你看不到 div是居中的。

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

现在定义一下你的

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

就像这样:

#main_content {
text-align: center;
}


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

解决办法如下:

#main_content {
background-color: #2185C5;
height: auto;
margin: 0 auto;
min-height: 500px;
position: relative;
width: 800px;
}
小开 
#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。

小开

也许你想这样:

超文本标示语言

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

小开

对子 div 使用 margin:0 auto;，然后可以将子 div 放在父 div 中间。

小开

大家都这么说，但我想再说一遍也无妨。

您需要将 width设置为某个值。

Http://jsfiddle.net/xuxec/

小开

它将工作给予 #container div width:80%(任何宽度小于主要内容，并给予% ，因此它管理良好，从左边和右边)和给予 margin:0px auto; 或者 margin:0 auto;(都工作良好)。

小开

以这种方式创建 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/

小开

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

text-align: center;

到 #main_content。

小开

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

最后，div#container实际上是居中的，但它只占用了它父元素的整个宽度。你做的居中权，你只需要改变宽度(如果需要) ，看到它是真正居中。如果您希望将 # main _ content 放在中心位置，那么只需在其上应用 margin: 0 auto;即可。

小开

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

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

从技术上讲，您的内部 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;
}

请注意: 此答案仅适用于 拦截级元素！要定位 内嵌式元素，需要在第一个 拦截父元素上使用 text-align: center属性。

小开

我认为这将工作得很好，虽然你可能需要重置“ 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;
}
小开

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

像这样:

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

更多有关这些连结的资料和例子:

小开

你可以用下面这段代码来居中浮动 div:

#div {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
    

margin-top: -100px;
margin-left: -100px;
}
小开 
.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 = “ father”，子 div 具有 id = “ child”。

这种风格在水平和垂直方向上都居中。垂直中心只能通过复杂的技巧来实现——或者将父 div 函数作为一个表单元格，这是 HTML 中唯一适当支持垂直对齐的元素之一。

只需设置孩子的高度，边距自动，和中间垂直对齐，它将工作。这是我知道的最简单的解决办法。

小开

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

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>
小开

在中间做一个 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>
小开

我在一些项目中使用了以下方法:

Https://jsfiddle.net/u3ln0hm4/

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


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

这里有一种使用 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;
}
小开 
* {
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;
}

提交答案