html - 如何将框居中对齐到窗口大小？

Question

我想居中对齐cen另一个 div() 内的 div( imp)

这是代码示例

.imp
{
        width:100%;
        height:100%;
        background-color: black;
        position: fixed;
        top:0;
        bottom:0;
}

上面是主要的 div 现在应该是中心的 div 在下面给出

    .cen
   {
    margin-left:auto;
    margin-right:auto;
    padding:5px;
    width:auto;
    height:auto;

   }

这是我的问题如何.cen与浏览器的中间对齐？有margin-left:auto; 边距右：自动；带到中心但不是从顶部。我已经将顶部设置为 50%，左侧设置为 50%，然后我也无法将其居中对齐，因为里面的内容.cen更大，所以它出现在窗口的右下角。任何线索或想法？

Answer 1

由于这需要响应，因此只能使用 Javascript 来实现。

var cen = document.getElementsByClassName('cen')[0];
var imp = document.getElementsByClassName('imp')[0];
cen.style.marginTop = ((imp.offsetHeight / 2) - (cen.offsetHeight / 2)) + "px";

resize在和load事件中调用上述函数。

工作小提琴

另外，检查Calc CSS3 属性。如果您知道子元素的高度，将会很有帮助。

Answer 2

这是一个 CSS 解决方案。您需要将您的.impdiv 包装在另一个具有 100% 窗口高度的 div 中。

这里的主要关键是外部 div和内部 div的display值以及.table.imptable-cell.cenvertical-align: middle

CSS

* {
  margin: 0;
}
html, body, #wrapper {
  height: 100%;
}
#wrapper { 
    background-color: red; 
    display: table; 
    width: 100%; }
.imp {
  min-height: 100%;
  background-color: blue;
  display: table-cell;
  vertical-align: middle;
}
.cen { 
    background-color: orange; 
}

HTML

<div id="wrapper">
    <div class="imp">
        <div class="cen">.cen</div>
    </div>
</div>