Center DIV NOT working

Question

I'm trying to simply center div inside of another div. I read on another post that as long as the width of the div im trying to center is smaller then the container width, and margin: 0 auto; is set, it should center and thats not the case with my code below. I need help

my container

#main {
    width: 1200px;
    height: 800px;
    margin: 0 auto;
    border-radius: 6px;
}

the div im trying to center inside my container

#tablesection { 
    width: 600px;
    margin: 0 auto; 
    text-align: center;
}

Answer 1

#outer{
   background-color: #000;
   float: left;
   height: 200px;
   width: 100%;
   }
#centerDiv{
   background-color: #fff;
   height: 150px;
   margin: auto;
   width: 70%;
}

check this demo.