[英]margin: auto doesn't center?
I'm trying to center a div on the document, and it works horizontally, but not vertically: 我试图将div居中放置在文档上,并且它在水平方向上起作用,但在垂直方向上不起作用:
width: 950px;
height: 630px;
background: #FFFFFF;
margin: auto;
Shouldn't margin: auto
place it in the center of whatever it's in (the page itself, in this case)? 不应该设置
margin: auto
将其margin: auto
放置在其所在位置(在本例中为页面本身)的中心吗? I used to have a workaround for this, but I can't get it to work. 我曾经有一个解决方法,但无法使其正常工作。 It would also be nice to know what I'm doing wrong, so I can stop doing it.
知道我在做什么错也很高兴,所以我可以停止这样做。
margin: auto
does not align elements vertically. margin: auto
不垂直对齐元素。
If you have to support older browsers, you'll have to define a fixed height for your div: 如果必须支持较旧的浏览器,则必须为div定义一个固定的高度:
div {
position: relative;
top: 50%;
width: 750px;
height: 500px; /* sample. adjust as needed */
margin: -250px auto 0; /* half the height */
}
Here's the fiddle: http://jsfiddle.net/2qmVX/ 这是小提琴: http : //jsfiddle.net/2qmVX/
If you don't care about IE8 and below, this'll allow you to retain your fluid height: 如果您不关心IE8及以下版本,则可以保留流体高度:
div {
position: relative;
top: 50%;
margin: auto;
transform: translateY(-50%);
/* add prefixed versions... */
}
Here's the fiddle: http://jsfiddle.net/VMaVM/ (remember: modern browsers only). 这是小提琴: http : //jsfiddle.net/VMaVM/ (请记住:仅适用于现代浏览器)。
Update: As pointed out by @FabrícioMatté, you also have to apply 100% height to the html
& body
elements: 更新:正如@FabrícioMatté指出的那样,您还必须将100%的高度应用于
html
和body
元素:
html, body {
height: 100%;
}
See the demos above. 参见上面的演示。
Proper vertical centering is something that not even CSS3 covers yet. 正确的垂直居中甚至是CSS3都没有涵盖的内容。
Luckily in your case, as you have a fixed height, you can maneuver the top
/ left
properties and use negative margin-top
and margin-left
to attain the desired behavior, with absolute
positioning: 幸运的是,由于您具有固定的高度,因此可以操纵
top
/ left
属性,并使用负margin-top
和margin-left
来实现所需的行为,并且具有absolute
位置:
background: #FFFFFF;
width: 950px;
height: 630px;
top: 50%;
left: 50%;
margin: -315px 0 0 -425px; /*top is negative half of height, same for width*/
position: absolute;
Beware that negative margins may behave unexpectedly on resolutions smaller than the div
. 请注意,在小于
div
分辨率下,负边距可能会表现出意外情况。
Here's a slightly more hackish way, using a table. 这是使用表的一种更骇人听闻的方法。 The basic idea is that the
vertical-align:middle
CSS property when applied to a table has the same effect as the old valign="center"
attribute. 基本思想是,将
vertical-align:middle
CSS属性应用于表时,其效果与旧的valign="center"
属性相同。 So the HTML would looks like this: 因此,HTML如下所示:
<table class="vcenter"><tr><td>
<div id="myDiv">This is a centered div</div>
</td></tr></table>
And the CSS: 和CSS:
.vcenter {
vertical-align: middle;
width: 100%;
height: 100%;
}
#myDiv {
background: #FFF;
width: 950px;
height: 630px;
margin: 0 auto;
}
html, body { height: 100%; }
Advantages of this method is that it is completely cross-browser - tested on IE6 and up, Firefox, Chrome, Opera and Safari. 这种方法的优势在于它是完全跨浏览器的-在IE6及更高版本,Firefox,Chrome,Opera和Safari上进行了测试。 I didn't test on mobile browsers though it should work.
我没有在移动浏览器上进行测试,尽管它可以工作。 Also it doesn't have the scrolling issue with small resolutions.
此外,它也没有小分辨率的滚动问题。 I use this hack for centered modals in one of my production sites.
我在我的一个生产站点中将这种hack用于集中模态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.