Question

HTML：

<div id="top">
Logo. Menu
</div>

<div id="content">
Text Text Text
</div>

<div id="bottom">
Text in the bottom
</div>

CSS：

#top {
  width: 100%;
  height: 100px;
  background-color: red;
}
#bottom {
  width: 100%;
  height: 100px;
  background-color: blue;
  margin: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
}

#content {
}

我希望“content”div位于页面的中间和中间。

我该怎么做？

Answer 1

为三个.main创建一个父div [{1}}，并为内容文字添加一个换行DIV标记，并使用display DIV table {{1} }。

＆＃13;

table-row

＆＃13;

table-cell

＆＃13;

Jsfiddle演示：https://jsfiddle.net/twy161er/15/

为什么要使用html, body { height: 100%; margin: 0; } .main { display: table; width: 100%; height: 100%; } .top { height: 0; /* make it dynamic */ background-color: red; display: table-row; } .bottom { height: 0; /* make it dynamic */ background-color: lime; display: table-row; } .content { display: table-row; vertical-align: middle; background: yellow; } .content div { text-align: center; vertical-align: middle; display: table-cell; }？因为<div class="main"> <div class="top"> Logo. Menu<br /> Dynamic content </div> <div class="content"> <div>Text Text Text</div> </div> <div class="bottom"> Text in the bottom<br /> Dynamic content </div> </div>总是显示即使窗口高度小于200px;并获得IE8 / 9支持。

Answer 2

这很简单！

您可以像这样制作#content的内容：

<div id="content">
    <div>Text Text Text</div>
</div>

然后，您需要做的就是添加这个CSS：

#content {}

#content div {
  position: absolute;
  padding: 0;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<强>解释

您首先absolute您的文字。然后，您重置元素margin的{{1}}和padding。您所做的就是将内部<div>向下推到页面高度的<div>，然后向左推动页面宽度的50%。然后，您必须将其向左移动50%宽度，并将其移向其顶部50%的高度。这样，您就可以获得50%的确切中心。

工作示例：JSFiddle.

Answer 3

您的内容缺少对ID“＃”的引用。

我希望这可以解决你的问题。

#content {
  display: table;
  margin: 0 auto;
}

位置div在中间

3 个答案: