div 가운데 정렬을 할줄 몰라서 도움좀 부탁드려요~

위 그림 처럼 메인 메뉴쪽은 1000 사이즈로 서브 쪽은 100% 사이즈로 보여줄려고 하는대

밑에 서브 메뉴쪽을 메인 메뉴 가운데에 있는거처럼 가운데로 정렬 시키고 싶은대요

잘 안되내요 밑에 소스 원본인대 도와주시면 감사하겠습니다~

< meta http-equiv="X-UA-Compatible" content="IE=edge" /> < head> < title> New Document < script type="text/javascript" src="js/jquery-1.7.2.min.js"> < script type="text/javascript" Src="js/ex.js"> < style type="text/css"> *{margin:0; padding:0;} ul{margin:0; padding:0; list-style:none;}  .wrap{width:100%; margin:0 auto; position:relative;}  .menu{overflow:hidden;}  .menu{width:1000px; margin:0 auto; padding:0;}  .menu li{width:250px; height:30px; overflow:hidden; float:left; text-align:center; background-color:#98c93c;}  .menu li a{   display:block;         width:100%;         height:100%;         line-height:30px;  /* li 높이 */         text-indent:0px;  /* 글자 왼쪽 여백 */         font-weight:bold;   font-size: 12px;         color:#ffffff;  /* 글자 색 */         text-decoration:none;}  .text{ position:absolute;  width:100%; background-color:#a9da4e;}  .text ul{width:250px; float:left;}  .text ul li{text-align:center;}  .text a{      display:block;         width:100%;         height:100%;         line-height:30px;  /* li 높이 */         text-indent:0px;  /* 글자 왼쪽 여백 */         font-weight:bold;   font-size: 12px;         color:#ffffff;  /* 글자 색 */         text-decoration:none;  }  a:hover{background-color:#547910;}  img{border:0;}  .contents{height:600px; background-color:#000000;} < /style>

< div class="wrap">  

  
• 1
  
• 2
  
• 3
  
• 4
 

  
•    
      
  • 서브메뉴
      
  • 서브메뉴
      
  • 서브메뉴
     
    
  
•    
      
  • 서브메뉴
      
  • 서브메뉴
      
  • 서브메뉴
     
    
  
•    
      
  • 서브메뉴
      
  • 서브메뉴
      
  • 서브메뉴
     
    
  
•    
      
  • 서브메뉴
      
  • 서브메뉴
      
  • 서브메뉴