Question

如果div具有已知尺寸，请说width: 300px; height: 200px，将屏幕垂直和水平放置在屏幕中间的最简单方法是什么？ Example here

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

只有CSS，没有Javascript。

Answer 1

将它从窗口/父容器中定位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;

您可能需要在height: 100%和body

上设置html

html, body {
    height: 100%;
}

修改：这是一个有效的example 。

Answer 2

如果不支持IE，使用display: table和display: table-cell实际上很容易实现。

以下是对HTML的更新：

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

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;
}

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

Answer 3

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

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

Answer 4

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

Answer 5

最简单的？其中一个jQuery center plugins可用...

窗口中div的垂直+水平居中的最简单方法是什么？

5 个答案: