html - 居中和定位，CSS 的噩梦

Question

我有一个任务，我最初认为很容易，但结果却非常困难。我希望能够检测当前可见窗口的高度，在可见窗口的那部分居中放置一些文本，并在窗口的末尾放置一个导航栏，因此它的图形如下所示:

我已经尝试过各种方法来做到这一点，包括将 div 的高度设置为某个 vh 级别并在该 dif 中居中文本，尽管这是非常有问题的，因为 ie 8 不支持 vh 并且为了居中div 内的文本，许多消息来源告诉我做 position: absolute，这往往会将文本移动到一个 Angular 落，这是我不想要的。

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

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

还有一些代码片段用于说明:

我所做的是我有一个高度为 100vh 宽度为 100% 的 div 和一个 id 为 myTitle 的 h1(id myTitle 的 css 只是将 text-align 设置为 中心)

<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 有一个固定的顶部和底部选择器:)