Trying to center 2 responsive tables on center of page - css

Question

For some reason these 2 tables won't center, I tried the bootstrap container class, tried margin 0 auto. But they won't center smack in the middle, any idea?
I want both tables centered and displayed horizontally in the middle side by side.
It's on codepen over here:
enter link description here
http://codepen.io/Satearn/pen/ybvXLR
.z
{position :absolute ;
top:50%;
left:50%;
transform :translate(-50%,-50%) ;}

Answer 1

To centre align them just remove width: 100%; from your following CSS code.
.table-fill {
background: white;
border-radius:3px;
border-collapse: collapse;
height: 320px;
margin: auto;
max-width: 300px;
padding:5px;
width: 100%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
}

Answer 2

Like this? I used Bootstrap. And I reduced the data inside the table for simplicity
html {
background-color: #3e94ec;
}
/*** Table Styles **/
.table-fill {
border-radius: 3px;
border-collapse: collapse;
padding: 5px;
}
th {
color: #D5DDE5;
background: #1b1e24;
border-bottom: 4px solid #9ea7af;
border-right: 1px solid #343a45;
font-size: 23px;
font-weight: 100;
padding: 24px;
text-align: left;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
vertical-align: middle;
}
th:first-child {
border-top-left-radius: 3px;
}
th:last-child {
border-top-right-radius: 3px;
border-right: none;
}
tr {
border-top: 1px solid #C1C3D1;
border-bottom-: 1px solid #C1C3D1;
color: #666B85;
font-size: 16px;
font-weight: normal;
text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
tr:hover td {
background: #4E5066;
color: #FFFFFF;
border-top: 1px solid #22262e;
border-bottom: 1px solid #22262e;
}
tr:first-child {
border-top: none;
}
tr:last-child {
border-bottom: none;
}
tr:nth-child(odd) td {
background: #EBEBEB;
}
tr:nth-child(odd):hover td {
background: #4E5066;
}
tr:last-child td:first-child {
border-bottom-left-radius: 3px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 3px;
}
td {
background: #FFFFFF;
padding: 20px;
text-align: left;
vertical-align: middle;
font-weight: 300;
font-size: 18px;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
border-right: 1px solid #C1C3D1;
}
td:last-child {
border-right: 0px;
}
th.text-left {
text-align: left;
}
th.text-center {
text-align: center;
}
th.text-right {
text-align: right;
}
td.text-left {
text-align: left;
}
td.text-center {
text-align: center;
}
td.text-right {
text-align: right;
}
.middlepage {
margin: 0 auto;
}
#outer-cont {
text-align: center;
}
#target-element-to-center {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<table class="table-fill col-xs-6" id="a">
<thead>
<tr>
<th class="text-center" colspan="2">Month</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-left">January</td>
<td class="text-left">$ 50,000.00</td>
</tr>
</tbody>
</table>
<table class="table-fill col-xs-6" id="a">
<thead>
<tr>
<th class="text-center" colspan="2">Strategies</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-left">January</td>
<td class="text-left">$ 50,000.00</td>
</tr>
</tbody>
</table>
</div>
</div>