编辑：查看现场演示 here

Question

我想放置一个＆lt; div＆gt;在一个元素的中间。水平对齐很容易，当然垂直对齐可以用JS完成，但我确信用CSS做更好的方法。有什么诀窍？

P.S。我需要这个用于HTML5＆lt; canvas＆gt;的应用程序element，所以我不介意该解决方案是否仅适用于支持canvas的浏览器和IE 7,8（使用插件时支持画布）。

编辑：div 的高度（和宽度）可在支持CSS3属性resize的浏览器中调整大小。但是，我并不介意太多。

另一个编辑：我也不知道div的高度（即使它没有调整大小）。

编辑：查看现场演示 here

这个例子使用JS。 （Loktar - 感谢链接）。

Thanks();

Answer 1

的 Live Demo 的

垂直对齐的一种方法是将line-height设置为容器的height。

#parent{ width: 200px; height: 300px; line-height: 300px; text-align:center; }

Answer 2

如果要对齐的元素具有固定大小，请将其设为绝对位置，并将其top和left设为50％。然后减去其margin-top的一半高度和margin-left的宽度的一半。 e.g。

<强> HTML：

<div id="container">
    <div id="alignedcontainer">content</div>
</div>

<强>的CSS：

#container {
    position: relative;
}
#alignedcontainer {
    position: absolute;
    width: 500px;
    height: 400px;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -250px;
}

Answer 3

如果元素不需要换行，快速而肮脏的方法是将行高设置为等于div高度（假设它是静态高度）。

Answer 4

适用于Chrome

<html>
<head>
    <style>
        #outer 
        {
            position: relative;
            border: 1px solid #000; 
            width: 400px; 
            height: 400px; 
            margin: 20px; 
            padding: 20px;                 
            }
        #inner 
        {
            position:absolute; 
            top:25%; 
            right:25%; 
            bottom:25%; 
            left:25%;
            width: 200px; 
            height: 200px; 
            background-color: #ccc;                
        }
    </style>
</head>
<body>
<div id="outer">
    <div id="inner"></div>
</div>
</body>

Answer 5

您还可以使用display:table，display:table-cell和vertical-align:center here作为中心。它将调整以适应内容，但不幸的是宽度将保持100％的容器。你可以看到它使用了here

在没有JavaScript的情况下将HTML元素对齐到父元素的中间

编辑：查看现场演示 here

5 个答案: