What is the easiest method for vertical+horizontal centering of a div in the window?

Given a div with known dimensions, say width: 300px; height: 200px, what is the easiest method to place it in the middle of the screen both vertically and horizontally ? Example here

给定已知尺寸的div，例如宽度：300px;高度：200px，最简单的方法是将它垂直和水平放置在屏幕中间？这里的例子

I'm interested in latest Firefox (no need for IE hacks).

我对最新的Firefox感兴趣（不需要IE黑客）。

CSS only please, no Javascript.

只有CSS，没有Javascript。

5 个解决方案

#1

Position it 50% from the window/parent container and use a negative margin size that's half of the elements width/height :)

将它从窗口/父容器中定位50％并使用负边距大小为元素宽度/高度的一半:)

position: absolute; // or fixed if you don't want it scrolling with the page.
width: 300px;
height: 200px;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;

You might need to set height: 100%, on both the body and html

您可能需要在body和html上设置height：100％

html, body {
    height: 100%;
}

Edit: Here's a working example .

编辑：这是一个有效的例子。

#2

Without supporting IE, this is actually pretty easy to achieve using display: table and display: table-cell.

在不支持IE的情况下，使用display：table和display：table-cell实际上很容易实现。

Here's an update to your HTML:

这是对HTML的更新：

<div id='my_div'>
    <div class="centered">this is vertically centered</div>
</div>

CSS:

CSS：

body, html
{
    height: 100%;
}
body
{
    margin: 0;
    padding: 0;
    border: 1px solid blue;
}
#my_div
{
    width: 300px;
    border: 1px solid red;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    display: table;
    overflow: hidden;
}
.centered
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

And to preview: http://jsfiddle.net/we8BE/

并预览：http：//jsfiddle.net/we8BE/

#3

I don't know if this is the simplest way, but it seems to work.

我不知道这是否是最简单的方法，但似乎有效。

http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm

#4

What methods are you open to using? For example CSS up to what level - 2 or 3? Javascript? jQuery? My first thought is that, since divs can be centred horizontally through margin-left: auto; and margin-right: auto;, maybe try margin: auto; for all 4 sides. Let me know if it works.

你有什么方法可以使用？例如CSS到什么级别 - 2或3？ JavaScript的？ jQuery的？我的第一个想法是，因为div可以通过margin-left水平居中：auto;和margin-right：auto;，也许尝试margin：auto;对于所有4方面。如果有效，请告诉我。

#5

The easiest? One of the numerous jQuery center plugins available...

最简单的？众多jQuery中心插件之一......

#1