中心和定位，一场css噩梦

Question

我有一项我最初认为很容易的任务，但事实证明这很困难。我希望能够检测当前可见窗口的高度，在可见窗口的该部分中居中显示一些文本，并在窗口的末尾放置导航栏，以便显示以下内容： / p>

我已经尝试了各种方法来做到这一点，包括将div的高度设置为某个vh级别，并将文本居中置于dif之间，尽管这很成问题，因为在8中不支持vh并且为了居中div里面的文字，很多消息来源告诉我做位置：绝对，这往往把文字转移到一个角落，这是我不想要的。

有没有办法可以创建这样的显示器？如果我措辞不当或张贴在错误的地方，请告诉我。在此先感谢您的帮助。

编辑：这是我正在使用的代码：http://pastelink.me/dl/b3cb50

还有一些代码片段需要澄清：

我做的是我有一个高度为100vh且宽度为100％的div和一个id为myTitle的h1（id为myTitle的css只是将text-align设置为center）< / p>

<div style="height: 100vh; width: 100%"><h1 id="myTitle"> This is a large title!</h1></div>  

以及正下方的导航栏，使用基础的导航条形码：

<nav class="top-bar" id="myNav" data-topbar>
    <ul class="title-area">
        <li class="name"><h1><a href="#ranadheer">My Site</a></h1></li>
        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>
    <section class="top-bar-section"> <!-- Right Nav Section -->
        <ul class="right">
            <li class="active"><a href="#">Right Button Active</a></li>
            <li class="has-dropdown"><a href="#">Right Button Dropdown</a>
                <ul class="dropdown">
                    <li><a href="#">First link in dropdown</a></li>
                </ul>
            </li>
        </ul>
        <!-- Left Nav Section -->
        <ul class="left">
            <li><a href="#">Left Nav Button</a></li>
        </ul>
    </section>
</nav>  

编辑：关于将导航栏的位置设置到底部的说法很多，我感谢你，尽管我忘了澄清一件事。我希望导航栏最初只在底部，当有人向下滚动时，它向上移动，并且不会固定在底部。

Answer 1

找到

<div class="navbar navbar-fixed-top">
...
</div>

并将其更改为

  <div class="navbar navbar-fixed-bottom">
...
</div>

bootstrap有一个固定的顶部和底部选择器：）

Answer 2

JSBIN

这是你需要的吗？表是CSS中最受支持的垂直对齐方法。

.table {
  display: table;
  min-height: 100vh; width: 100%;
}
.table div {
  display: table-row;
}
.header {
  height: 90px;
  background: #ddd;
}
.header h1 {
  text-align: center;
}
.content p {
  padding: 0 1em;
  display: table-cell;
  vertical-align: middle;
}
.footer {
  height: 220px;
  background: #ddd;  
}