banner区域的div无法垂直居中

.banner{
   width:1200px;
   height:670px;
   position:relative;
   background:url(img/banner.jpg);
}
.banner > div{
   position:absolute;
   color:#fff;
   width:600px;
   height:600px;
   top:50%;
   left:50%;
   margin-left:-300px;
   margin-top:-300px;
}

麻烦帮我看看，为什么不能垂直居中

以下是结构部分

<section class="banner">
   <div>
       <h1>Welcome to Website</h1>
       <p>Lorem ipsum dolor sit amet,consectetur adipisicing elitconsectetur </p>
   </div>
</section>