I have a template that for some resaon isn't centering elements on Gmail. If anyone could help me resolve the issue it would be greatly appreciated.

Code:

<html xmlns="http://www.w3.org/1999.xhtml" xmlns:0="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schmeas-microsoft-com:vlm">
<head>
    <!--[if gte mso 9]>
    <xml>
        <o:OfficeDocumentSettings>
            <o:AllowPNG />
            <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <!-- disable mobile zooming -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />

    <!-- enable media queries for Windows 8 Phone -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- disable ios format detection -->
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="date=no">

    <!-- disable iOS reformatting -->
    <meta name="x-apple-disable-message-formatting">

    <!-- allow consistent rendering in iOS web browser -->
    <meta name="apple-mobile-web-app-capable" content="yes">

    <title>[title of email]</title>

    <style type="text/css">
        /* --- CLIENT SPECIFIC STYLES --- */

        /* fix text zooming in webkit and mso */
        body, table, td, a {
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }

        /* fix unwanted mso table padding */
        table, td {
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }

        /* allows mso to render images properly */
        img {
            -ms-interpolation-mode: bicubic;
        }

        /* fix unwanted span underlines */
        span {
            display: inline-block;
        }

        /* Samsung Mail Android 100% width fix */
        #MessageViewBody, #MessageWebViewDiv {
            width: 100% !important;
        }

        /* --- RESET STYLES --- */

        /* default image styling */
        img {
            border: 0px;
            outline: none;
            height: auto;
            line-height: 100%;
            text-decoration: none;
        }

        /* removes unwanted underlines in Windows 10 Mail */
        a {
            text-decoration: none;
        }

        /* removes unwanted td padding */
        table {
            border-collapse: collapse !important;
        }

        /* removed unwanted body padding */
        body {
            width: 100% !important;
            height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        /* fix iOS blue links */
        a[x-apple-data-detectors] {
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
        }

        /* mobile queries */
        @media screen and (max-width: 599px) {
            .wrapper {
                width: 100% !important;
                max-width: 100% !important;
            }
        }
    </style>
</head>

<body style="margin: 0; padding: 0; width: 100%; height: 100%;">
    <table style="width: 100%;" border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td align="center">
                <table style="width: 600px; max-width: 600px;" border="0" cellpadding="0" cellspacing="0" width="600" class="wrapper">
                    <tr>
                        <td align="center" style="padding-top: 30px;">
                            Hello World
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>