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

Question

问题背景：

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

问题

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

菜单打开时定位丢失，文本显示在屏幕顶部，我希望div在打开many时保持在页面中间： p>

守则：

请查看以下显示问题的 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%; }

Fiddle here