Centering responsive email in iphone 6 - html

Question

My responsive email is aligning to the left in iphone 6. I have align="center" on the containing tables and TD's. 320px width is specified in media queries with the main containing table having a width="100%".
#media only screen and (max-device-width: 480px)
table[class=threeHundred20], td[class=threeHundred20], tr[class=threeHundred20] {
width: 320px !important;
display: block !important;
}
I know that iphone 6 is higher than my specified 320 width which has created side gutters of space which I don't mind, but I need to center the main content. Is there any way to do this without changing my media queries to target different sizes? I want to avoid going down this route.

Answer 1

Display:block can sometimes force a left align of content if the content is smaller then the parent container. Try instead using inline-block for display with text-align: center.

Answer 2

due to some past experiences with
align:center;
I would recommend you use
margin-left: 50%;
margin-right: 50%;
instead.

Answer 3

I have always used this way, and it works on all devices and email clients
demo: https://jsfiddle.net/cL011mw3/
html:
<table width="100%">
<tr>
<td>
<table width="640" class="width320" align="center">
<tr>
<td bgcolor="#999999">
text
</td>
</tr>
</table>
</td>
</tr>
Css:
#media only screen and (max-width: 500px){
*[class].width320{
width:320px !important
}
}

Answer 4

This work perfectly for me :
Add metas :
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta name="x-apple-disable-message-reformatting" />
Add media querie
#media only screen and (max-width: 480px){
.fullwidth,
.fullwidth tbody,
.fullwidth tbody > tr,
.fullwidth tbody > tr > td,
.fullwidth tbody > tr > th,
table[class=fullwidth],
table[class=fullwidth] tbody,
table[class=fullwidth] tbody > tr,
table[class=fullwidth] tbody > tr > td,
table[class=fullwidth] tbody > tr > th
td[class=main-border] {
max-width: 100% !important;
min-width: 100% !important;
width: 100% !important;
display: block !important; <!-- table, tbody, tr, td became blocs -->
clear: both; <!-- to prevent floating ex: <table align="left"…> -->
margin: 0 auto !important; <!-- to center the blocs -->
}
}
Don't forget tbody in you table an outlook styles to extra white space :
Table wrapper + main container table :
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;margin:0 auto;">
<tbody>
<tr>
<td valign="middle" align="center">
<table class="fullwidth" width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="borde-r-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;margin:0 auto;">
<tbody>
<tr>
<td style="font-size:5px;line-height:5px; height: 10px"> </td> <!-- paddign & margin not supported by Outlook -->
</tr>
<tr>
<td valign="middle" align="center">
<table class="fullwidth" width="100%" cellspacing="0" cellpadding="0" border="0" align="center" style="borde-r-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;margin:0 auto;">
<tbody>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</tbody>
</td>
</tr>
<tr>
<td style="font-size:5px;line-height:5px; height: 10px"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>