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

我遇到了在div中居中div的一些方法，但这些通常需要中心元素具有固定的宽度和高度。有一种方法来做到这一点，如果内DIV为中心将是可变的宽度和高度的（例如：为中心的固定大小的帧内部的图像，并且图像可能是可变的宽度/高度的）CSS - 如何将可变高度和宽度的div居中放置在另一个div的中心？

来源

2010-10-27 Extrakun

你也可以用Javascript吗？ – Starx 2010-10-28 06:04:49

是的，如果有必要的话 – Extrakun 2010-10-28 06:24:30

唯一的方法在所有浏览器中心可变宽度（据我所知）是

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

或JavaScript

至于中间水平，这将迫使你使用JavaScript（我认为）

来源

2010-10-27 13:53:17

分因为宽度很容易...您可能已经知道这一点，但只需将左右边距设置为自动。不幸的是，对于身高来说，我只看到了奇怪的定位解决方法。你会认为他们会为顶部/底部做出类似的保证金，但唉，不。我会尽力找到解决方法的链接。

<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

来源

2010-10-27 13:58:16

老实说，尽管我喜欢做css定位和避免表格，当我需要在中间垂直对齐时，我仍然使用表格甚至非表格数据而不是CSS定位修补程序就像我发布的链接一样。 – 2010-10-27 14:07:18

根据我的经验，这不适用于IE。 IE忽略边界自动设置，并将元素放在左侧。任何意见？ – Sheen 2010-10-27 14:08:25

你的DOCTYPE是什么？上面的例子适用于XHTML过渡：<！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Transitional // EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional。 dtd“> – 2010-10-27 20:46:23

水平居中可以用CSS来实现：

#containerDiv { 
    text-align:center; 
} 

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

对于垂直居中使用JavaScript，如果containerDiv没有固定的高度。

来源

2010-10-27 14:03:53

注意：如果没有在内部容器上设置固定宽度，这将无法用于块级元素。如果您不知道内部容器的宽度，请将其设置为显示：inline-block，并将其正确居中。另一种选择（如果你不是内嵌块的粉丝）是使用[这里记录的技术]（http://stackoverflow.com/questions/3206735/centering-a-div-horizontally-with-variable-宽度 - 不工作 - 在-IE/3207432＃3207432）。 – nickb 2011-03-18 00:49:28

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

例如，你的身体素有“文本对齐：中心”，和你的容器有“保证金：0汽车”。然后IE将它居中。

如果您不希望其内容居中，您可以将“文本对齐”设置回容器左侧。

来源

2012-01-10 21:17:25 Emilie

您可以使用显示属性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

来源

2012-02-23 12:53:12 acme

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

回答

相关问题