将 div 与固定顶部居中对齐答案

【问题标题】：Center align a div with a fixed top将 div 与固定顶部居中对齐
【发布时间】：2013-12-10 01:35:40
【问题描述】：

我的页面顶部有一个包含 3 个按钮的表格。我也有一个 div（在这张桌子下面），我想把它放在屏幕中间。我写了这段代码：

#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 根据我屏幕的 width 居中对齐，没问题。

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

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

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

有什么想法吗？

【问题讨论】：

尝试删除位置：绝对；来自#walkthrough，这是小提琴jsfiddle.net/S5bKq/331
#walkthrough { 位置：相对；边距：自动；顶部：0；右：0；底部：0；左：0； . . } 使位置相对于内容

标签： css html

【解决方案1】：

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

使用

#walkthrough {
    position: relative;
}

代替

#walkthrough {
        position: absolute;
    }

FIDDLE DEMO

【讨论】：

【解决方案2】：

将顶部导航从表格（永远不应该这样做）更改为ul。然后将 div 设为position: relative

【讨论】：