Question

我想居中对齐另一个div（cen）内的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与浏览器中间对齐的问题？保证金左：自动;保证金右：自动;带到中心，但不是从顶部。我已经给出了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中。

此处的主要关键是{div display table的{{1}}值和内部div .imp的{{1}}以及{{1} }}

<强> CSS

table-cell

<强> HTML

.cen

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

2 个答案: