두 개의 테이블을 왼쪽에서 오른쪽으로 나란히 놓고 둘 다 중앙에 배치하려면 어떻게해야합니까?

두 개의 테이블이 있는데, 나란히 배치하고 싶지만 페이지 중앙에두기를 원합니다.

거의 해냈고, 페이지 중앙에 정렬하는 방법에만 문제가 있습니다. 내 예 :

데모

내 HTML :

<table class="table_on_the_left">
    <tr><td>
        hello demo here 
        </td></tr></table>

<table class="table_on_the_right">
    <tr><td>
        hello demo here 2 
    </td></tr></table>

내 CSS :

table.table_on_the_left {
    position:center;
    float:left;
   }

  table.table_on_the_right {
    position:center;
    float:right;
  }