定位标头在移动设备上的显示方式与在桌面视图上显示的方式不同，且长度与屏幕相同

Question

定位的标头显示在移动设备上div的顶部，然后，具有相同长度的桌面视图屏幕显示在div的中央，如编程的一样。该问题仅在手机上显示。有人遇到过类似的问题吗？

这是两个屏幕截图，第一个是它在移动视图中在Mac上的外观，第二个是在手机上

计算机：

移动：

   

.overlay{
    height:100%;
    opacity: 0.70;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #414A4C;
    z-index: 0;
}

 .page-banner-image{
    height:100%;
    width: 100%;
    padding-bottom:30%;
    position: relative;
    overflow:hidden;
    z-index: 0;
    max-height:800px;
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    }
    
    .page-banner-header{
    position: absolute;
    z-index: 10;
    text-align: center;
    width: 100%;
    height: 100%;
    color:#fff;
    display: table;
    top:0;
    left:0;
    right:0;
    bottom:0;
    }
   
   

 .page-banner-header .page-banner-header-table{
    display: table-cell;
    vertical-align: middle;
    position: relative;
    }
   

 .page-banner-header .page-banner-text h2{
    color: #fff;
    font-size: 60px; 
    font-weight: bold;
    }
 
   

 .page-banner-header .page-banner-text h3{
    color: #fff;
    font-size: 21px;
    font-weight: bold;
    }


 

<div class="hero">
        <div id="owl-carousel-hero" class="owl-carousel owl-theme">
            <div class="item">
                <div class="page-banner-background">
                    <div class="page-banner-image" style="background-image:url('background.png');">
                    </div>
                </div>
                <div class="page-banner-header wow fadeInDown" data-wow-delay=0.4s>
                    <div class="page-banner-header-table">
                        <div class="page-banner-text">
                            <h3>Sub Header</h3>
                            <h2>Main Header</h2>
                        </div>
              <!--           <div class="page-banner-btn">
                            <a class="hvr-grow transition" href="#"><?php //echo $btn ;?></a>
                        </div> -->
                    </div>
                </div>
                <div class="overlay"></div><div class="overlay overlay-top"></div>
            </div>
        </div>
    </div>