css：如何将框div元素直接居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1725759/
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
css: how to center box div element directly in center?
提问by aoghq
when i use top:50% and left:50%
当我使用 top:50% 和 left:50%
the box is not directly in center. of course when the box is very small, it appears to be centered. but when box is a bit big, it looks as if it's not centered.
盒子不直接在中心。当然，当盒子很小时，它似乎是居中的。但是当盒子有点大时，它看起来好像没有居中。
how can i resolve this ?
我该如何解决这个问题？
回答by Amber
topand leftcorrespond to the top-left corner of your box. What you're trying to do is have them correspond to the center. So if you set margin-topand margin-leftto negative of one-half the height and width respectively, you'll get a centered box.
top并left对应于您的盒子的左上角。你要做的是让它们对应于中心。因此，如果您分别将margin-top和设置margin-left为高度和宽度的二分之一，您将得到一个居中的框。
Example for a 300x200 box:
300x200 盒子的示例：
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -100px;
回答by Pekka
Horizontal: Use a fixed width and
水平：使用固定宽度和
margin-left: auto;
margin-right: auto;
vertical: That's not that easy. You could use
垂直：这并不容易。你可以用
display: table-cell
for the surrounding DIV and then give it a
对于周围的 DIV 然后给它一个
vertical-align: middle
回答by Franz
You can assign the box a fixed width and heigth, and then give it's margin-top and margin-left properties the negative half of the height and width.
您可以为该框指定固定的宽度和高度，然后为其 margin-top 和 margin-left 属性指定高度和宽度的负一半。
EDIT: Example
编辑：示例
div.centered {
width: 500px;
height: 400px;
top: 50%;
left: 50%;
position: absolute;
margin-top: -200px;
margin-left: -250px;
}
回答by Biskrem Muhammad
回答by blagus
The very bizarre CSS "language" does not provide a simple way to center a element in the screen. Kludges must be made! This is the only solution I came to elements that are AUTO in both height and width. Tryed in FF19 (Win+Mac), CH25 (Win+Mac) and IE9.
非常奇怪的 CSS “语言”没有提供一种简单的方法来将元素置于屏幕中心。必须制作kludges！这是我对高度和宽度均为 AUTO 的元素的唯一解决方案。在 FF19 (Win+Mac)、CH25 (Win+Mac) 和 IE9 中尝试过。
.overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#eee; /* aesthetics as you wish */
}
.overlay .vref { /* it is a vertical reference to make vertical-align works */
display:inline-block;
vertical-align:middle; /* this makes the magic */
width:1px;
height:100%;
overflow:hidden;
}
.overlay .message {
display:inline-block;
padding:10px;
border:2px solid #f00; /* aesthetics as you wish */
background-color:#ddd; /* aesthetics as you wish */
vertical-align:middle; /* this makes the magic */
max-width:100%; /* prevent long phrases break the v-alignment */
}
<div class="overlay">
<div class="vref"> </div>
<div class="message">whatever you want goes here</div>
<div class="vref"> </div>
</div>
回答by David R Tribble
One way is to assign a specific width to the box, then halve the remaining distance on each (left and right) side. This may be easier if you use percentages instead of pixel widths, e.g.,
一种方法是为框指定特定宽度，然后将每一侧（左侧和右侧）的剩余距离减半。如果您使用百分比而不是像素宽度，这可能会更容易，例如，
<div style="margin-left:25%; margin-right:25%">...</div>
This leaves 50% width for the div box.
这为 div 框留下了 50% 的宽度。
回答by BlissC
body { text-align: center; }
#box {
width: 500px; /* or whatever your width is */
margin: 10px auto;
text-align: left;
}
The above would centre your box centrally horizontally on the page with a 10px margin at the top and bottom (obviously that top/bottom margin can be altered to whatever you want). The 'text-align' on the body is required for IE, which as usual doesn't quite get the hang of it otherwise. You then need the left text-align on your box (unless you want text it in centred too) to counteract the text-align center on the body.
以上将使您的框在页面上水平居中，顶部和底部有 10px 的边距（显然，顶部/底部边距可以更改为您想要的任何内容）。IE 需要正文上的“文本对齐”，否则通常不会完全掌握它。然后，您需要在您的框中使用左文本对齐（除非您也希望文本居中）以抵消正文上的文本对齐中心。
Trying to centre vertically is just about impossible using pure CSS though. Though there's a vertical-align in CSS, it doesn't work like the HTML vertical align in tables, so in CSS 2 there's no in-built vertical align like the HTML one. The problem is that you're dealing with an unknown height - even if you know the height of your box, the height of the page is unknown, or rather what are you trying to fix the box in the centre of? The page? The viewport? The visible screen area's going to be different for everyone, depending on their screen resolution, browser, and all of the browsers interpret the height differently.
但是，使用纯 CSS 尝试垂直居中几乎是不可能的。虽然 CSS 中有一个垂直对齐，但它不像表格中的 HTML 垂直对齐那样工作，所以在 CSS 2 中没有像 HTML 那样的内置垂直对齐。问题是您正在处理未知的高度 - 即使您知道框的高度，页面的高度也是未知的，或者更确切地说，您试图将框固定在什么的中心？这一页？视口？每个人的可见屏幕区域都会有所不同，这取决于他们的屏幕分辨率、浏览器和所有浏览器对高度的不同解释。
There are various methods that claim to have solved the problem, but usually they don't reliably work in all browsers. I found this onethe other day, which doesn't seem bad, but it doesn't work in Google Chrome (works in Firefox and Opera, but I didn't get chance to check out IE). There's an interesting discussion on the problem though on this threadon Webmaster World that summarises the various methods and pros and cons of them and is well worth a look.
有各种方法声称已经解决了这个问题，但通常它们不能在所有浏览器中可靠地工作。前几天我发现了这个，看起来不错，但它在 Google Chrome 中不起作用（在 Firefox 和 Opera 中有效，但我没有机会查看 IE）。虽然在Webmaster World上的这个线程上有一个关于这个问题的有趣讨论，它总结了各种方法和它们的优缺点，非常值得一看。
Edit: Dav's solution in the first response works okay as long as you (or the visitor to the site) don't increase the font size or line height. The container will be centred, but as soon as the font size is increased or more content added, it'll overflow the container.
编辑：只要您（或网站的访问者）不增加字体大小或行高，第一个响应中的 Dav 解决方案就可以正常工作。容器将居中，但一旦字体大小增加或添加更多内容，它就会溢出容器。
