Html 如何将一个 div 居中放置在另一个 div 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15376634/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I center a div within another div?
提问by user2142709
I suppose that the #containerwill be centered within #main_content. However, it is not. I just want to find out the reason and how to make it centered.
我想#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>采纳答案by ShuklaSannidhya
You need to set the width of the container. (autowon't work)
您需要设置容器的宽度。（auto不会工作）
#container {
width: 640px; /*can be in percentage also.*/
height: auto;
margin: 0 auto;
padding: 10px;
position: relative;
}
The CSS reference by MDNexplains it all.
MDN的 CSS 参考解释了这一切。
Check out these links
查看这些链接
- auto - CSS reference | MDN
- margin - CSS reference | MDN
- What is the meaning of
autovalue in a CSS property - StackOverflow
Update- In action @ jsFiddle
更新- 在行动@jsFiddle
回答by Jeremiah
Technically, your inner DIV (#container) iscentered horizontally. The reason you can't tell is because with the CSS width: autoproperty the inner DIV is expanding to the same width as its parent.
从技术上讲，你内心的DIV（ #container）的水平居中。您无法分辨的原因是因为使用 CSSwidth: auto属性，内部 DIV 扩展到与其父级相同的宽度。
See this fiddle: http://jsfiddle.net/UZ4AE/
看到这个小提琴：http: //jsfiddle.net/UZ4AE/
#container {
width: 50px;
height: auto;
margin: 0 auto;
padding: 10px;
position: relative;
background-color: red;
}
In this example, I simply set the width of #containerto 50pxand set the background to redso that you can see that it is centered.
在这个例子中，我只是将宽度设置为#containerto50px并将背景设置为 ，red以便您可以看到它居中。
I think the real question is "How do I center elements horizontally with CSS?" and the answer is (drum roll please): it depends!
我认为真正的问题是“如何使用 CSS 将元素水平居中？” 答案是（请鼓点）：这取决于！
I won't do a full rehash of the myriad ways to center things with CSS when W3Schools does it so nicely here: http://www.w3schools.com/css/css_align.aspbut the basic idea is that for block level elements you simply specify the desired width and set the left and right margins to auto.
当 W3Schools 在这里做得很好时，我不会对用 CSS 居中的无数方法进行完整的重述：http: //www.w3schools.com/css/css_align.asp但基本思想是块级元素您只需指定所需的宽度并将左右边距设置为auto。
.center {
margin-left: auto;
margin-right: auto;
width: 50px;
}
Please note:This answer only applies to BLOCK level elements! To position an INLINE element, you will need to use the text-align: centerproperty on the first BLOCK parent.
请注意：此答案仅适用于 BLOCK 级别的元素！要定位 INLINE 元素，您需要使用text-align: center第一个 BLOCK 父级上的属性。
回答by iraj jelodari
Another interesting way: fiddle
另一种有趣的方式：小提琴
css
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
html
<div class="container">
<div class="centered-div">
<b>Enjoy</b>
</div>
</div>
回答by Zilberman Rafael
You can center float div with this little code:
您可以使用此小代码将浮动 div 居中：
#div {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -100px;
}
回答by Rohit Azad
Now just define your
现在只需定义您的
#main_contenttext-align:centerand define your#containerdisplay:inline-block;
#main_contenttext-align:center并定义你的#containerdisplay:inline-block;
as like this
像这样
#main_content{
text-align:center;
}
#container{
display:inline-block;
vertical-align:top;
}
回答by Arman P.
Try to add
尝试添加
text-align: center;
to your parent container css declaration. And following to child container:
到您的父容器 css 声明。并遵循子容器：
display: inline-block;
It must do the trick.
它必须做到这一点。
回答by Vish
it would work giving the #container div width:80%[any width less than the main content and have given in % so that it manages well from both left and right] and giving margin:0px auto; OR margin:0 auto; [both works fine].
它可以提供#container div width:80%[任何宽度小于主要内容并以%给出，以便它从左到右都能很好地管理]并给出margin:0px auto; 或保证金：0 自动；[两者都很好]。
回答by Jason Sears
I would try defining a more specific width, for starters. It's hard to center something that already spans the entire width:
对于初学者，我会尝试定义更具体的宽度。很难将已经跨越整个宽度的东西居中：
#container {
width: 400px;
}
回答by Atif Azad
here is the solution
这是解决方案
#main_content {
background-color: #2185C5;
height: auto;
margin: 0 auto;
min-height: 500px;
position: relative;
width: 800px;
}
回答by Web Designer cum Promoter
#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;
}
try this tested ok. live check on jsfiddle
试试这个测试好。实时检查jsfiddle
