Simpel text-幻灯片的行为很奇怪

Question

我在jQuery中有一个基本的幻灯片放映，工作正常，除了当内容淡入时，它要么从顶部淡入，要么从底部淡入。我真的不知道为什么会这样。我基本上希望文本留在屏幕的中心(水平和垂直)，然后在原地淡出和淡入。

HTML：

<div id="open-menu">
            <div class="index">

                <div class="sp">
                    <h1>HEADING 1</h1>
          <p>Text</p>
                </div>

                <div class="sp">
                    <h1>HEADING 2</h1>
                    <p>Text</p>
                </div>

                <div class="sp">
                    <h1>HEADING 3</h1>
                    <p>Text</p>
        </div>

                <div class="sp">
                    <h1>HEADING 4</h1>
                    <p>Text</p>
        </div>

                <div class="sp">
                    <h1>HEADING 5</h1>
                    <p>Text</p>
        </div>

                <div class="sp">
                    <h1>HEADING 6</h1>
                    <p>Text</p>
                </div>

            </div>

   <div id="button-previous">prev</div>
     <div id="button-next">next</div>
</div>

CSS：

#open-menu {
    position:fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
    z-index: 50;
    background: #fff;
  text-align: center;
}

#open-menu .index {
    position: fixed;
  transform: translate(-50%, -50%);
  top: 54%;
    left: 50%;
}

#open-menu .index h1 {
  font-size: 2rem;
  line-height: 3.2rem;
  -webkit-font-smoothing: subpixel-antialiased;
}

#open-menu .index p {
   margin: 2rem 0 0 0;
   font-size: 1.25rem;
   line-height: 2.2rem;
}

#center-2 {
     display: table;
     margin: 0 auto;
   font-size: 1.25rem;
}

.sp {margin-bottom: 60px;}
#button-previous {float: left;}
#button-next {float: right;}

jQuery：

    $(document).ready(function(){
            $('.sp').first().addClass('active');
            $('.sp').hide();    
            $('.active').show();

        $('#button-next').click(function(){
            $('.active').removeClass('active').addClass('oldActive');    

                if ( $('.oldActive').is(':last-child')) {

                    $('.sp').first().addClass('active');

                }

                else {

                    $('.oldActive').next().addClass('active');

                }

            $('.oldActive').removeClass('oldActive');
            $('.sp').fadeOut();
            $('.active').fadeIn();

        });

        $('#button-previous').click(function(){
            $('.active').removeClass('active').addClass('oldActive');    

                if ( $('.oldActive').is(':first-child')) {

                    $('.sp').last().addClass('active');
                }

                else {

                    $('.oldActive').prev().addClass('active');
                }

            $('.oldActive').removeClass('oldActive');
            $('.sp').fadeOut();
            $('.active').fadeIn();
        });
    });

jsFiddle：https://jsfiddle.net/dgy740g3/