Question

我遇到过一些在div中居中div的方法，但是那些通常要求元素居中以具有固定的宽度和高度。如果要居中的内部div具有可变的宽度和高度（例如：将图像置于固定尺寸的框架内，并且图像可以具有可变的宽度/高度），是否有办法做到这一点

Answer 1

水平居中可以用CSS完成：

#containerDiv {
  text-align:center;
}

#innerDiv {
  margin: 0 auto;
  text-align: left;
}

对于垂直居中，如果containerDiv没有固定高度，我会使用Javascript。

Answer 2

将变量宽度置于所有浏览器中（我知道）的唯一方法是使用

<table align="center" cellpadding="0" cellspacing="0"><tr><td><div>This div is variable width and is centered.</div></td></tr></table>

或JavaScript

中心水平会迫使你使用JavaScript（我认为）

Answer 3

IE在顶级元素上需要“text-align：center”。

例如，你的body元素有“text-align：center”，而你的容器有“margin：0 auto”。那么IE将把它放在中心位置。

如果您不希望其内容居中，可以在容器上将“text-align”设置为左侧。

Answer 4

宽度居中很容易......您可能已经知道这一点，但只需将左右边距设置为自动。不幸的是，对于身高，我只看到了奇怪的定位工作。你认为他们会为上/下做出类似的差距，但是唉，没有。我会尝试在解决方法上找到一个链接。

<div style='width:400px;height:200px;background-color:#CCCCCC;'>
    <div style='margin:0px auto;width:30px;height:30px;background-color:#0000CC;'>&nbsp;</div>
</div>

编辑：找到可能对垂直部分有帮助的链接：

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Answer 5

您可以使用显示属性to make a table-cell out of it：

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>This small paragraph...
</DIV>

但是，这个建议并不适用于我。但是这个确实：

https://stackoverflow.com/a/6284195/156481

CSS - 如何将可变高度和宽度的div居中放在另一个div的中心？

5 个答案: