Center table in responsive website - html

Question

I'm currently busy with building a website and creating a responsive design. But now I have several tables in this design added the css display:block; to them. But now in my responsive design it is aligned to the left. But I want it to be aligned in the center. But when I add text-align:center; or margin:auto; it doesn't work. What can I try more?
Code:
HTML:
<table class="kalender">
<tr>
<td colspan="3">
<h1>Mei</h1>
</td>
</tr>
<tr>
<td>
<img src="Kalender/RundUmDenFinanzplatz.png" id="logos" height="150px" alt="Rund um den Finanzplatz" title="Rund um den Finanzplatz">
<h2>
Rund um den Finanzplatz Eschborn-Frankfurt
</h2>
<h4>
1 Mei 2017
</h4>
<div id="flagid"><img src="Flags/germany.png" id="flag" height="15px" alt="Duitsland" title="Duitsland">
<p>GER</p>
</div>
</td>
<td>
<img src="Kalender/GiroDItalia.png" id="logos" height="150px" alt="Giro d'Italia" title="Giro d'Italia">
<h2>
Giro d'Italia
</h2>
<h4>
5-28 Mei 2017
</h4>
<div id="flagid"><img src="Flags/italy.svg" id="flag" height="15px" alt="Italië" title="Italië">
<p>ITA</p>
</div>
</td>
<td>
<img src="Kalender/TourOfCalifornia.png" id="logos" height="150px" alt="Tour of California" title="Tour of California">
<h2>
Amgen Tour of California
</h2>
<h4>
14-20 Mei 2017
</h4>
<div id="flagid"><img src="Flags/usa.png" id="flag" height="15px" alt="USA" title="USA">
<p>USA</p>
</div>
</td>
</tr>
</table>
CSS:
.kalender {
margin: auto;
margin-top: 50px;
border-top: 2px solid white;
}
.kalender h1 {
color: #ffffff;
font-family: Century Gothic;
font-size: 50pt;
text-align: center;
}
#logos {
display: block;
margin: auto;
opacity: 0.7;
filter: alpha(opacity=70);
}
#logos:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
.kalender h2 {
color: #ffffff;
font-family: century Gothic;
font-weight: bold;
margin-top: 20px;
width: 250px;
text-align: center;
}
.kalender h4 {
color: #ffffff;
font-family: century Gothic;
text-align: center;
margin-top: 10px;
}
.kalender p {
color: #ffffff;
font-family: Century Gothic;
font-size: 12pt;
display: inline;
}
#flagid {
text-align: center;
margin-top: 10px;
}
#flagid img {
margin-right: 5px;
}
#media screen and (max-width: 720px) {
table, td, tr {
display: block;
}
.kalender td, .kalender tr {
margin-top: 0px;
margin-bottom: 50px;
margin-right: 0px;
text-align: center;
margin: auto;
}
.kalender h1 {
font-size: 30pt;
margin: 0px;
text-align: center;
width: 100%;
}
.kalender img {
margin: auto;
text-align: center;
}
.kalender {
margin: auto;
text-align: center;
}
}

Answer 1

You should use "text-align:center;" in style (I don't know what is the rest of your code) or in (width:100%) that include your table.

Answer 2

It's better to do a grid with css for responsive layout , here a solution for your code
.kalender {
margin: auto;
margin-top: 50px;
border-top: 2px solid white;
}
.kalender h1 {
color: #ffffff;
font-family: Century Gothic;
font-size: 50pt;
text-align: center;
}
#logos {
display: block;
margin: auto;
opacity: 0.7;
filter: alpha(opacity=70);
}
#logos:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
.kalender h2 {
color: #ffffff;
font-family: century Gothic;
font-weight: bold;
margin-top: 20px;
width: 250px;
text-align: center;
}
.kalender h4 {
color: #ffffff;
font-family: century Gothic;
text-align: center;
margin-top: 10px;
}
.kalender p {
color: #ffffff;
font-family: Century Gothic;
font-size: 12pt;
display: inline;
}
#flagid {
text-align: center;
margin-top: 10px;
}
#flagid img {
margin-right: 5px;
}
#media screen and (max-width: 720px) {
table, td, tr {
display: block;
}
tr{
background: #000;
position: absolute;
right: 0;
margin-right: 50%;
transform: translate(50%);
}
.kalender td, .kalender tr {
margin-top: 0px;
margin-bottom: 50px;
text-align: center;
}
.kalender h1 {
font-size: 30pt;
margin: 0px;
text-align: center;
width: 100%;
}
.kalender img {
margin: auto;
text-align: center;
}
.kalender {
margin: auto;
text-align: center;
}
}
<table class="kalender">
<tr>
<td colspan="3">
<h1>Mei</h1>
</td>
</tr>
<tr>
<td>
<img src="Kalender/RundUmDenFinanzplatz.png" id="logos" height="150px" alt="Rund um den Finanzplatz" title="Rund um den Finanzplatz">
<h2>
Rund um den Finanzplatz Eschborn-Frankfurt
</h2>
<h4>
1 Mei 2017
</h4>
<div id="flagid"><img src="Flags/germany.png" id="flag" height="15px" alt="Duitsland" title="Duitsland">
<p>GER</p>
</div>
</td>
<td>
<img src="Kalender/GiroDItalia.png" id="logos" height="150px" alt="Giro d'Italia" title="Giro d'Italia">
<h2>
Giro d'Italia
</h2>
<h4>
5-28 Mei 2017
</h4>
<div id="flagid"><img src="Flags/italy.svg" id="flag" height="15px" alt="Italië" title="Italië">
<p>ITA</p>
</div>
</td>
<td>
<img src="Kalender/TourOfCalifornia.png" id="logos" height="150px" alt="Tour of California" title="Tour of California">
<h2>
Amgen Tour of California
</h2>
<h4>
14-20 Mei 2017
</h4>
<div id="flagid"><img src="Flags/usa.png" id="flag" height="15px" alt="USA" title="USA">
<p>USA</p>
</div>
</td>
</tr>
</table>