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

Question

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

这是代码示例

.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 事件中调用上述函数。

Working Fiddle

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

Answer 2

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

这里的主要关键是display 的值table 用于外部div .imp 和table-cell 用于内部div .cen 以及vertical-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>