Put social media div in the web page center - html

Question

I am trying to put the social media icones of my website in the page center.
But I couldn't.
This is my code:
https://jsfiddle.net/2ahgL130/1/
CSS:
.table1{
margin:0;
padding:0;
min-width:100%
}
.table2{
font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size:1em;
line-height:1.5;
max-width:600px;
padding:0 20px 0 20px;
}
.table3{
padding:20px;
}
.table4{
padding-bottom:20px;
padding-top: 0px;
align-items: center;
}
.table5{
padding-bottom:20px;
}
So please how can I correct my code to get the elements in the page center

Answer 1

You have to update your entire code and use below snippet using flexbox.
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 100%;
background-color: #ccc;
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<a href="" target="_blank" data-saferedirecturl="">
<img src="https://dummyimage.com/32x32/000/fff" width="32" height="32">
</a>
<a href="" target="_blank" data-saferedirecturl="">
<img src="https://dummyimage.com/32x32/000/fff" alt="" width="32" height="32">
</a>
</div>

Answer 2

You can use this code
body {
margin: 0;
padding: 0;
}
.table1 {
margin: 0;
padding: 0;
min-width: 100%
}
.table2 {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 1.5;
max-width: 600px;
padding: 0 20px 0 20px;
margin: 0 auto;
}
.table3 {
padding: 20px;
}
.table4 {
padding-bottom: 20px;
padding-top: 0px;
align-items: center;
}
.table5 {
padding-bottom: 20px;
}
table {
border-collapse: collapse;
margin: 0 auto;
}
<div>
<div lang="en" dir="ltr" class="table1">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="table2">
<tbody>
<tr>
<td class="table3">
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="table4">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="210">
<tbody>
<tr style="text-align: center;">
<td height="32" width="42">
<a href="" target="_blank" data-saferedirecturl="">
<img src="https://www.w3schools.com/images/picture.jpg" width="32" height="32">
</a>
</td>
<td height="32" width="42">
<a href="" target="_blank" data-saferedirecturl="">
<img src="https://www.w3schools.com/images/picture.jpg" width="32" height="32">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="table5">
<a href="" target="_blank" data-saferedirecturl="">
<img src="" alt="" width="136" height="50">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 3

Add Table align:center
<div>
<div lang="en" class="table1">
<table align="center" role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="table2">
<tbody>
<tr>
<td class="table3">
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="table4">
<table align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" width="210">
<tbody>
<tr>
<td height="32" width="42">
<a href="" target="_blank" data-saferedirecturl="">
<img src="" width="32" height="32" >
</a>
</td>
<td height="32" width="42">
<a href="" target="_blank" data-saferedirecturl="">
<img src="" width="32" height="32" >
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="table5" style="text-align:center">
<a href="" target="_blank" data-saferedirecturl="">
<img src="" alt="" width="136" height="50">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
https://jsfiddle.net/lalji1051/f2gs7erq/5/