Html 在 CSS 中居中一个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2281087/
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
Center a div in CSS
提问by Luuk
I'm trying to center the newsslider (in the div bottom-container) on this page:
我试图在此页面上将新闻滑块（在 div 底部容器中）居中：
http://www.luukratief-design.nl/dump/parallax/index.html
http://www.luukratief-design.nl/dump/parallax/index.html
I already have text-align: center;
我已经有了 text-align: center;
Still it does not work.
它仍然不起作用。
Any suggestions?
有什么建议？
回答by BalusC
The text-align: center;only centers the element's inline contents, not the element itself.
在text-align: center;仅中心元素的在线内容，而不是元素本身。
If it is a blockelement(a divis), you need to set margin: 0 auto;, else if it is an inlineelement, you need to set the text-align: center;on its parentelement instead.
如果是块元素（a divis），则需要设置margin: 0 auto;，否则如果是内联元素，则需要text-align: center;在其父元素上设置。
The margin: 0 auto;will set top and bottom margin to 0and left and right margin to auto(of the same size) so that it automagically puts itself in the center. This only works if the block element in question has a known width(either fixed or relative), else it cannot figure where to start and end.
在margin: 0 auto;将设置上下页边距来0，左，右边距为auto（大小相同的），因此它自动将自身置于中心。这仅在所讨论的块元素具有已知width（固定或相对）时才有效，否则它无法确定从哪里开始和结束。
回答by Boris Guéry
text-align should not be used to center a block element. (except in IE6, but this is a bug)
text-align 不应用于将块元素居中。（IE6 除外，但这是一个错误）
You have to fix the width of the block, then use margin: 0 auto;
您必须固定块的宽度，然后使用 margin: 0 auto;
#block
{
width: 200px;
border: 1px solid red;
margin: 0 auto;
}
and
和
<div id="#block">Some text... Lorem ipsum</div>
回答by ant
One way :
单程 ：
<div align="center">you content</div>
Better way:
更好的方法：
<div id="myDiv">you content</div>
CSS for myDIV:
myDIV 的 CSS：
#myDiv{
margin:0px auto;
}
回答by Ashok
i always use
我总是用
<div align="center">Some contents......</div>
回答by Paul Sweatte
Use text-align: centerfor the container, display: inline-blockfor the wrapper div, and display: inlinefor the content div to horizontally center content that has an undefined width across browsers:
使用text-align: center的容器，display: inline-block用于包装的div，并display: inline为内容的div到具有跨浏览器的一个未定义的宽度水平中心内容：
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
/* Use inline-block for the wrapper */
.wrapper { display: inline-block; }
.content { display:inline; }
.container { text-align:center; }
/*Media query for IE7 and under*/
@media,
{
.wrapper { display:inline; }
}
</style>
<title>Horizontal Centering Test</title>
</head>
<body>
<div class="container">
<div class="content">
<div class="wrapper">
test text
</div>
</div>
</div>
</body>
</html>
回答by Paul Sweatte
Provided width is set, and you put a proper DOCTYPE,
如果设置了宽度，并且您放置了适当的 DOCTYPE，
Try this:
尝试这个：
Margin-left: auto;
Margin-right: auto;
Hope this helps
希望这可以帮助
回答by John Boker
add
添加
margin:auto;
回答by Steve Danner
Try adding this to the style.
尝试将其添加到样式中。
margin-left: auto;
回答by tahdhaze09
Try this:
尝试这个：
#bottombox {
background:transparent url(../images/bg-bottombox.png) no-repeat scroll 0 0;
float:none;
height:137px;
margin:0 auto;
padding-top:14px;
width:296px;
}
That should center the div in your footer.
这应该将 div 居中放置在页脚中。
回答by alemjerus
Create a table with single row and three columns, set left and right width to 100% and voila, the middle one gets centered automatically
创建一个单行三列的表格，将左右宽度设置为100%，瞧，中间的会自动居中
