如何垂直居中div？

我有一个div，我想水平和垂直居中。如何垂直居中div？

对于水平问题一切都很好，但我有一个垂直对齐的问题。

我尝试这样做：

#parent { 
    display: table; 
} 

#child { 
    display: table-row; 
    vertical-align: middle; 
}

但这不起作用。

来源

2010-12-11 trrrrrrm

我试过谷歌...感谢您的帮助 – trrrrrrm 2010-12-11 15:33:22

检查我的答案，看看它是否适用于你.. @ra_htial ....耶老年人的问题，但仍然是一个棘手的问题，应该澄清 – juanm55 2012-07-16 15:44:40

可能的重复[如何垂直居中一个div的所有浏览器？]（http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers） – Carpetsmoker 2015-07-30 15:09:55

如果您只需支持支持transform（或其供应商前缀版本）的浏览器，请使用这个奇怪的旧技巧来垂直对齐元素。

#child { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

如果你要支持旧的浏览器，就可以使用它们的组合，但他们可能是由于在渲染block VS table差异的痛苦。

#parent { 
    display: table; 
} 

#child { 
    display: table-cell; 
    vertical-align: middle; 
}

如果你的高度是固定的，你需要支持那些真的老了，讨厌的浏览器...

#parent { 
    position: relative; 
} 

#child { 
    height: 100px; 
    position: absolute; 
    top: 50%; 
    margin-top: -50px; 
}

如果你的身高是不固定的，有一个workaround。

See it on jsFiddle。

来源

2010-12-11 09:55:37 alex

非常感谢我的朋友，但只有当我知道什么是＃小孩身高......但并不总是一样，大拇指！感谢您的有用答案！ – trrrrrrm 2010-12-11 15:37:01

http://jsfiddle.net/RQznA/检查此例如 – trrrrrrm 2010-12-11 15:39:05

@ From.ME.to.YOU请参阅[解决方法]（http://www.jakpsatweb.cz/css/css-vertical-center-solution。 HTML）。不幸的是，IE6 + 7需要额外的容器。 – alex 2010-12-11 15:40:57

首先，将非表格标记视为表格（使用display：table和friends）不是跨浏览器的。我不知道你需要支持哪些浏览器，但肯定IE6不会这样做。但是，如果你的目标浏览器做所有支持显示：表我可以给你一些提示。

您正在寻找的垂直居中方法（使用表格布局）取决于具有vertical-align：middle的TD，然后在此范围内，一个块元素将垂直居中。所以我觉得你想要的是：

#parent { display:table-cell; vertical-align:middle; } 
#child { /* nothing necessary, assuming it's a DIV it's already display:block */ }

这是确定使用的表芯，没有周围表行和表，浏览器推断所需要的表包覆件为您服务。

来源

2010-12-11 16:42:41 jpsimons

这里是另一种方式，当你不知道内格大小或什么的，你可以在这里使用％有固定“定心” ......

的想法是，你最值你的子元素的一半高度，创造了定心错觉

下面的代码：

<div id="parent"> 
    <div id="child"> 
      hello 
    </div> 
</div>

和造型：

#parent { 
    position: relative; 
    height: 300px; 
    width:200px; 
    background-color:green; 
} 

#child { 
    height: 50%; 
    width: 50%; 
    position:relative; 
    top:25%; 
    left:25%; 
    background-color:red; 
}

在这里，你可以看到它在行动 http://jsfiddle.net/Wabxv/

来源

2012-07-16 15:41:19 juanm55

请注意，这将div放在剩余的可用空间中（如果父div有一些文本，这种方式将集中在剩余空间中，而不是整个父项大小......用于绝对定位） – juanm55 2012-07-16 15:46:53

虽然这个链接可能回答这个问题，但最好在这里包含答案的重要部分，并提供供参考的链接。如果链接页面更改，则仅链接答案可能会失效。 – NathanOliver 2015-07-30 15:14:31

更正@NathanOliver感谢您的支持！ – juanm55 2015-08-24 23:14:32

具有parent属性为，display:table和儿童财产display: table-cell和vertical-align: middle为我工作。

来源

2014-04-21 22:48:36 Abz

如何垂直居中div？

回答

相关问题