position为absolute时max-height不生效, 内容不能自适应调整高度?

Question

前提：需要兼容ie8+

借助 position: absolute 使div垂直居中，但是发现设置 max-height:500px; 根据内容不能自适应调整高度,该怎么解决呢?

html:

<div class="dialog_box_wrap">
    <div class="dialog_box">
    
    </div>
</div>

.dialog_box_wrap {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: #000;
    opacity: 0.8;
}
.dialog_box {
    max-height: 500px;
    width: 800px;
    background: #fff;
    position: absolute;
    overflow-y: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

Answer 1

top: 0;
right: 0;
bottom: 0;
left: 0;

你这么写应该会使 dialog_box 占满首个非 static 的祖先元素，
没有看懂你的需要，
最好给出具体的 dom 结构。

Answer 2

使用你这种方式实现垂直居中必须要给容器一个确定的宽高，而不能是动态的，否则会充满整个position为relative的父元素。详细可以参考：http://www.tuicool.com/articl...

Answer 3

absolute 垂直居中方式必须满足计算值： top, bottom 与 height 有值、top-margin, bottom-margin 为 auto 才能算出结果。前三者的计算值一旦出现 auto 都会将 margin 置为 0。你设的 max-height 会直接拿来算 height。

各种居中方式可参考这个 http://howtocenterincss.com/#...