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

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%; }

Fiddle here