如何垂直居中容器div
Posted
技术标签:
【中文标题】如何垂直居中容器div【英文标题】：How to center vertically a container div 【发布时间】：2012-06-03 05:23:52 【问题描述】：我无法将包含广告类型容器的 popup_interstitial_table 垂直居中。
自动解释的小提琴：http://jsfiddle.net/NomikOS/D8LLM/
也欢迎使用 jQuery 解决方案。
html：
<div id="popup_interstitial">
<div id="parent">
<div id="popup_interstitial_pro_head_text">
Headline text
</div>
<div id="child">
<div id="popup_interstitial_table">
<div id="popup_interstitial_row2">
<div id="popup_interstitial_title"><?php echo $title; ?></div>
<img id="popup_interstitial_image" src="<?php echo $image; ?>">
<div id="popup_interstitial_description"><?php echo $description; ?></div>
</div>
</div>
</div>
</div>
</div>
相关的CSS代码是：
#popup_interstitial_pro_head_text
color:#FFF;
font-size: 2em;
font-weight: normal;
text-shadow: 0.05em 0.05em #666;
background-color: #A5CF4C;
width: 100%;
padding-left: 1%;
padding-top: 0.8%;
padding-bottom: 0.8%;
border-top-width: thin;
border-top-style: solid;
border-top-color: #648323;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #759928;
margin-bottom: 2%;
-webkit-box-shadow: 1px 1px 8px #333333;
-moz-box-shadow: 1px 1px 8px #333333;
khtml-box-shadow: 1px 1px 8px #333333;
filter: shadow(color=#333333, direction=135, strength=0);
#popup_interstitial
display: none;
width: 100%;
height: 100%;
position: fixed;
background-color:#FFFFFF;
color:#111;
z-index:9999;
top:0;
left:0;
#popup_interstitial_table
width: 50%;
margin: 0 auto 0 auto;
background-color:#E7E7E7;
padding: 1em 2.2em;
font: 0.85em "Trebuchet MS", Arial, Helvetica, sans-serif;
margin-top: 5%;
vertical-align: center;
#popup_interstitial_title
color:#FFF;
font-size: 1.5em;
font-weight: bold;
padding: 0 0 0 0.3em;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #777;
background-color: #888;
border-radius: 0.3em;
#popup_interstitial_description
padding-top: 1.7em;
padding-bottom: 1.2em;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #ccc;
line-height:1.5em;
#popup_interstitial_image
vertical-align: baseline;
margin: 25px 20px 3px 0;
-webkit-box-shadow: 1px 1px 8px #333333;
-moz-box-shadow: 1px 1px 8px #333333;
khtml-box-shadow: 1px 1px 8px #333333;
filter: shadow(color=#333333, direction=135, strength=0);
padding: 4px;
margin-left: 6px;
float: left;
这是最重要的：
#parent position: relative;
#child
padding: 0% 0;
margin: 0 auto;
【问题讨论】：
@JaredFarrish：如果你想水平居中，这很有效。 @JFK - 你是对的，当然；我把两者混在一起了。 其中之一：reisio.com/examples 【参考方案1】：使用这个 CSS：
#child
display: table
#popup_interstitial_table
display: table-cell;
vertical-align: middle;
text-align: center
并将您的其他 CSS 添加到其中。
见Example of vertical centering
和 CSS: centering things.
【讨论】：
如果跨浏览器兼容性不是必须的，这是一个不错的选择。据我所知，目前还有很多 IE 浏览器，大多数都不支持display: table-cell。 “居中”在 IE7/8 中表现不佳
@JFK - 使用IE NetRenderer，IE8 可以正常显示，但 IE7、6 等则不能。
我在modernizr的帮助下全面使用它【参考方案2】：
对于您当前的结构，您有两种解决方案可以使其发挥作用：
1) CSS
用 div 包裹元素并使用这个技巧：
请参阅此working Fiddle 示例！ （如果您上下移动框架，您会看到目标保持垂直居中。）
#childWrap // the new element, the mentioned wrapper
display: table;
width: 100%;
height: 100%;
#child // your element that needs to be restyled
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
#popup_interstitial_table // the element vertically aligned
width: 50%;
margin: -48px auto 0 auto;
这里所做的是将包装元素设置为显示为表格，占据其父元素的整个宽度和高度（#parent）。
然后，我们可以将#child设置为表格单元格，并将其内容设置为垂直居中对齐。
现在的窍门，因为 #parent 还包含另一个元素，您需要保持原样，但将其高度从 #popup_interstitial_table 的“中心”计算中移除，我们需要使用拉动 #popup_interstitial_table margin-top:-60px 固定其位置。负边距是#popup_interstitial_pro_head_text 占据的高度。
重要提示：
由于您具有此结构，为了将修复传递给浏览器，您的 #popup_interstitial_pro_head_text 需要使用单个单元，我选择了 px 作为示例。
您在多个声明中混合使用了 % 和 em！
附带说明：
垂直对齐：居中；
您使用：
垂直对齐：中间；
更多信息请见this link！
2) JQUERY
使用 jQuery，您可以收集 #popup_interstitial_table 占用的空间并计算必要的顶部和左侧固定值以使其垂直居中：
请参阅此working Fiddle 示例！ （如果您上下移动框架，您会看到目标保持垂直居中。）
JQUERY
function center()
var $target = $('#popup_interstitial_table'),
$header = $('#popup_interstitial_pro_head_text'),
fixTop = ($target.outerHeight(true)/2)-($header.outerHeight(true)/2),
fixLeft = $target.outerWidth(true)/2;
$target.css(
"margin-top": "-" + fixTop + "px",
"margin-left" : "-" + fixLeft + "px"
);
$(document).ready(function()
center();
);
CSS
为防止大量脚本计算，CSS 应固定为：
#parent
position: relative;
height: 100%; // this was added
#child
padding: 0% 0;
height: 100%; // this was added
#popup_interstitial_table
width: 50%;
margin: 0 auto 0 auto;
background-color:#E7E7E7;
padding: 1em 2.2em;
font: 0.85em "Trebuchet MS", Arial, Helvetica, sans-serif;
position: absolute; // this was added
top: 50%; // this was added
left: 50%; // this was added
所以，重复一遍，在不改变您当前结构的情况下，这是我能想到的两种解决方案来使您的元素居中！
【讨论】：
@reisio，Tks，链接已更新答案！ （昨晚昏昏欲睡） +1 您的1) CSS 解决方案按预期工作，感谢其他提示！
@NomikOS，为了让它在你的结构下工作，不得不费一番功夫；）【参考方案3】：
我不知道在不使用表格单元格的情况下垂直居中元素的任何好方法。在这种情况下，它相当简单，但你会回到基于表格的布局，我猜你想避免这种情况。
回复问题：元素垂直居中有多重要？
另一种选择是使用 javascript 在渲染时设置边距。
【讨论】：
+1：我正要建议一种 jQuery 方法来克服这个 css 限制（除非你使用表格），但上次我这样做时，我被否决了，因为它不是 css 解决方案. 我见过一些方法可以解决% 边距/填充，但目前我无法复制。
@jfk 我已编辑问题以接受 jquery 解决方案。请拍摄。-【参考方案4】：
您好，您可以通过两个简单的步骤获得结果：-
只需定义 display:table-cell 和 vertical-align:middle 到你的这个 id #popup_interstitial_table
#popup_interstitial_table
background-color: #E7E7E7;
display: table-cell;
font: 0.85em "Trebuchet MS",Arial,Helvetica,sans-serif;
height: 300px;
margin: 5% auto 0;
vertical-align: middle;
width: 450px;
查看演示：- http://jsfiddle.net/D8LLM/34/
【讨论】：
这已经由 Shaquin Trifonoff 提出，如果跨浏览器兼容性不是必须的，它就可以工作。 @JFK 是我的答案是错误的，因为如果您对某人投反对票，那么您应该提及您的答案是错误的，所以我对您投了反对票，并且对于跨浏览器兼容性问题，您在投反对票我认为这不好，我只是告诉你确切的事情，我认为我的回答是正确的，它在 safari、chrome 和 Firefox 上运行良好...... @JFK 我猜你没有正确检查我的答案，如果你能正确地看到我的答案并与 Shaquin Trifonoff 的答案进行比较，那么你就会明白我是如何给出答案的第一件事没有必要定义 display:table parent 所以 Shaquin 在他的答案中给出了所以只需比较两个答案并正确检查，你就会得到差异...... @ShailenderArora 我已经看到了你的答案，并与上面的答案完全不同.......人们怎么说这是重复的答案......我只是想知道......以上是关于如何垂直居中容器div的主要内容，如果未能解决你的问题，请参考以下文章