1）CSS

Question

我无法垂直居中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; 
}

Answer 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

Answer 2

我不知道在不使用表格单元格的情况下垂直居中元素的任何好方法。在这种情况下，它是相当简单的，但你回到基于表格的布局，我想你应该避免。

回答问题：元素垂直居中有多重要？

另一种选择是使用javascript在渲染时设置边距。

Answer 3

对于您当前的结构，您有两种解决方案可以使其工作：

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;
}

这里要做的是将wrapper元素设置为显示为表格，占据其父级的整个宽度和高度（#parent）。

然后，我们可以将#child设置为显示为表格单元格，并将其内容设置为中间的垂直对齐。

现在的诀窍，因为#parent还包含您需要保留的另一个元素，但是从#popup_interstitial_table的“中心”计算中删除了它的高度，我们需要拉{ {1}} #popup_interstitial_table来确定其位置。负边距是margin-top:-60px占据的高度。

重要提示：

由于您拥有此结构，为了将修复程序传递给浏览器，您的#popup_interstitial_pro_head_text需要使用一个单元，我为此选择了#popup_interstitial_pro_head_text。

您在几个声明中混合了px和%！

旁注：

~~Vertical-align：center;~~

您使用：

vertical-align：middle;

有关详细信息，请参阅this link！

2）JQUERY

使用jQuery，您可以收集em占用的空间，并计算必要的顶部和左侧固定值，使其保持垂直居中：

请参阅此working Fiddle示例！ ^{（如果你上下移动框架，你会看到目标保持垂直居中。）}

JQUERY

#popup_interstitial_table

<强> CSS

为了防止大量的脚本计算，CSS应该得到修复：

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();
});

所以，重复一遍，不改变你当前的结构，这是我能想到的两个解决你的元素的解决方案！

Answer 4

您好，您可以通过两个简单的步骤来实现您的结果： -

只需定义 display：table-cell ＆amp; 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/

如何垂直居中容器div

4 个答案:

1）CSS

重要提示：

2）JQUERY