打开时，滑出菜单不会在页面中间居中

Question

问题背景：

我在我的应用程序中使用“现成的” jQuery滑出面板菜单。

问题

以下屏幕快照显示了关闭了幻灯片菜单的应用程序。 请注意，文本位于页面中间居中的div中：

打开菜单后，定位丢失了，文本显示在屏幕顶部，当许多菜单打开时， 我希望div保留在页面中间：

编码：

请查看以下显示问题的JS Fiddle：

https://jsfiddle.net/svjkv79j/

如前所述，我在此菜单中使用了“架子”选项，但是我添加了自己的样式来使文本div居中，如下所示：

         .centered {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);

        <div class="centered">
                    <div class="col-lg-8 col-lg-offset-2">
                        <h1 class="page-header">Off-canvas Push Menu For Bootstrap 3</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis sem ut varius commodo. Nunc ultricies diam vel elit hendrerit, at mollis est elementum. </p>

                    </div>
                </div>

在“居中”的div中需要采取什么样式才能阻止它在打开菜单时失去其风格？ 任何帮助将不胜感激。

Answer 1

您只需要给#page-content-wrapper { height: 100%; } #page-content-wrapper { height: 100%; }

在这里摆弄