在 CSS 中居中 div [关闭]
Posted
技术标签:
【中文标题】在 CSS 中居中 div [关闭]【英文标题】：Center a div in CSS [closed] 【发布时间】：2011-01-17 20:59:12 【问题描述】：我正在尝试在此页面上将新闻滑块（在 div 底部容器中）居中：
http://www.luukratief-design.nl/dump/parallax/index.html
我已经有text-align: center;
还是不行。
有什么建议吗？
【问题讨论】：
我投票决定将此问题作为题外话结束，因为仅链接问题且链接已失效！ 【参考方案1】：text-align: center; 仅将元素的内联内容居中，而不是元素本身。
如果是block element（是div），则需要设置margin: 0 auto;，否则如果是inline element，则需要在其parenttext-align: center; /em> 元素。
margin: 0 auto; 将上下边距设置为0，将左右边距设置为auto（大小相同），以便它自动将自己置于中心。这仅适用于有问题的块元素具有已知的width（固定或相对），否则它无法确定从哪里开始和结束。
【讨论】：
你可能还必须给“div”一个明确的宽度。 是的，你确实需要给块元素一个明确的宽度，我编辑了它。 IIRC，一些旧版本的 IE 将无法识别auto 边距值，但它们会（错误地）使用 text-align 来居中块元素，所以同时使用 if你可以。
@T. Yates：没有人使用 IE5 或更早版本（阅读：它在 IE6 中工作得非常好，这被认为是您（可能）想要支持的绝对最低要求）。
@Bak：你实际上需要text-align: center。如果你卡住了，就问一个新问题。【参考方案2】：
text-align 不应用于使块元素居中。 （IE6 除外，但这是bug）
你必须固定块的宽度，然后使用 margin: 0 auto;
#block
width: 200px;
border: 1px solid red;
margin: 0 auto;
和
<div id="#block">Some text... Lorem ipsum</div>
【讨论】：
【参考方案3】：一种方式：
<div align="center">you content</div>
更好的方法：
<div id="myDiv">you content</div>
myDIV 的 CSS：
#myDiv
margin:0px auto;
【讨论】：
【参考方案4】：如果设置了宽度，并且你放置了一个合适的 DOCTYPE，
试试这个：
Margin-left: auto;
Margin-right: auto;
希望对你有帮助
【讨论】：
为了让开发人员看起来更干净，请仅使用 'margin: 0 auto;'【参考方案5】：添加
margin:auto;
【讨论】：
【参考方案6】：我总是用
<div align="center">Some contents......</div>
【讨论】：
我确认这适用于 Firefox(v54)、Chrome(v58) 和 Safari(v10)。【参考方案7】：将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>
【讨论】：
【参考方案8】：尝试将其添加到样式中。
margin-left: auto;
【讨论】：
【参考方案9】：试试这个：
#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;
这应该使 div 在你的页脚中居中。
【讨论】：
【参考方案10】：创建一个单行三列的表格，将左右宽度设置为 100%，瞧，中间的会自动居中
【讨论】：
这是一个有效的答案。在大多数情况下不切实际，是的。但是，仍然有效。请停止仅仅因为您“喜欢它”而对有效答案投反对票。以上是关于在 CSS 中居中 div [关闭]的主要内容，如果未能解决你的问题，请参考以下文章