css - 将 div 与固定顶部居中对齐

Question

我的页面顶部有一个包含 3 个按钮的表格。我还有一个 div(在这张 table 下面)，我想把它放在屏幕中间。我写了这段代码:

#walkthrough {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 85%;
    height: 150px;
    border: 1px solid #000000;
    border-radius: 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
}

然后我有这样一个元素:<div id="walkthrough"> test </div> .这个 div 根据我屏幕的宽度 居中对齐，没问题。

顺便说一句，查看高度，div 与所有屏幕尺寸居中对齐，但我必须考虑带有按钮的栏。 JSFiddle .

如果我的 div 的高度太大，它会超过按钮，我不希望这种情况发生。 This图片显示了现在的结果，this显示我想要得到的东西。

我需要在高度上对齐 div 中心，但不要越过按钮。

有什么想法吗？

Answer 1

absolute 定位元素将从文档的正常流中移除，并将放置在页面上的确切位置。它也脱离了文档的正常流程 - 它不会影响 HTML 中它之前或之后的元素在网页上的定位方式。

使用

#walkthrough {
    position: relative;
}

代替

#walkthrough {
        position: absolute;
    }

FIDDLE DEMO