I used `margin:0 auto` on div as well as table but the drop down list and table are displayed on the left side of browser (in Chrome and Firefox). In IE the table comes at the horizontal center of page but not the drop down list.

Here's the code:

```
 <div >
        <select id="ddl" onChange="showTA()" style="margin:0 auto">
            <option value="none">Select Product</option>
            <option value="ib">IB</option>
            <option value="rs">RS</option>
            <option value="bp">BP</option>
        </select>
  </div>
  <div>
        <table id="selectBox" class="tables" 
                    style="display:none; margin:0 auto;">
                <tr class="header_rows">
                    <th>ID</th>
                    <th>HostOS</th>
                    <th>BuildID</th>
                    <th>Description</th>
                    <th>User</th>
                    <th>StartTime</th>
                </tr>
                <tr class="data_rows" ng-repeat='b in t1'>
                    <td class="tds">{{b.ID}}</td>
                    <td class="tds">{{b.HostOS}}</td>
                    <td class="tds">{{b.BuildID}}</td>
                    <td class="tds">{{b.Description}}</td>
                    <td class="tds">{{b.User}}</td>
                    <td class="tds">{{b.StartTime}}</td>
                </tr>
        </table>
  </div>

```

What I want is that the `ddl` as well as `table` should always be at the center of page even when the browser's size changes.( I need a css solution. If not possible then I'll accept Javascript as well), and I don't want to use `<center>` tag.