How do I get this div to the center? - html

Question

So, I got this currently:
http://gyazo.com/5d30270a775462fef170283162a9152e
How do I get the second sort of table to be at same position as the button, so in the center? Tried almost everything, can't think of anything else.
Please help me!
Current code:
.flat-table {
display: inline-block;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 115%;
overflow: auto;
width: 90%;
text-align: center;
float: right;
}
th {
background-color: #f95252;
color: white;
font-weight: normal;
padding: 20px 30px;
text-align: center;
}
td {
background-color: #fff;
color: rgb(111, 111, 111);
padding: 20px 30px;
}
This is the code of the table.
What to do?
Thanks!

Answer 1

Make sure that the surrounding div's are floated and align everything in the div to the center by using: margin: 0 auto;
Look at this example:
<div class="top">menu</div>
<div class="middle">
<table>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
</table>
</div>
<div class="bottom">button</div>
CSS:
.top {
height: 40px;
width: 100%;
float: left;
background-color: Red;
}
.middle {
width: 100%;
height: auto;
float: left;
}
.middle table {
width: 300px;
background-color: grey;
margin: 0 auto;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 115%;
}
.bottom {
height: 40px;
float: left;
width: 100%;
background-color: blue;
}
.bottom a {
display: block;
width: 100px;
margin: 0 auto;
height: 20px;
background-color: yellow;
line-height: 20px;
text-align: Center;
margin-top: 10px;
}
th {
background-color: #f95252;
color: white;
font-weight: normal;
padding: 20px 30px;
text-align: center;
}
td {
background-color: #fff;
color: rgb(111, 111, 111);
padding: 20px 30px;
}