What's the best way to center your HTML email content in the browser window (or email client preview pane)?

I normally use CSS rules for margin:0 auto along with a 960 container for my standard browser based content, but I'm new to HTML email creation and I've got the following design that I'd like to now center in the browser window without standard CSS. http://static.helpcurenow.org/mockups/emails/2010/may-survey/survey.html I seem to recall seeing somewhere that it can also be accomplished by wrapping your email table design in an outer table set to width:100% and using some inline style for text-align:center on the tbody or something like this to do it? Is there a best practice for this?

5,867 72 72 gold badges 60 60 silver badges 132 132 bronze badges asked May 18, 2010 at 13:40 Joel Glovier Joel Glovier 7,649 10 10 gold badges 53 53 silver badges 87 87 bronze badges "margin:0px auto" .. just FYI, when you use 0 of anything, you don't need to specify a unit :) Commented May 18, 2010 at 13:44

8 Answers 8

Align the table to center.

 
 
 Your Content

Where you have "your content" if it is a table, set it to the desired width and you will have centred content.

answered May 18, 2010 at 13:48 Shadi Almosri Shadi Almosri 11.9k 16 16 gold badges 60 60 silver badges 80 80 bronze badges Is there a CSS property which does the same thing? text-align: center isn't doing the same thing. Commented Aug 5, 2014 at 19:19

Some email providers require this deprecated method of centering objects. (I'm thinking of Apple Mail).

Commented Dec 13, 2014 at 22:42 When you code for email layouts, you literally code like it's 1999. Commented Aug 17, 2015 at 14:33

This causes child tables to have centered td s as well in Outlook Web App (OWA), no matter if they have alignment set to left or not.

Commented Feb 12, 2018 at 19:14 Does not work in gmail mobile. This answer below does however stackoverflow.com/a/38149673/129638 Commented Aug 2, 2021 at 22:19

For googlers and completeness sake:

Here's a reference I always use when I need to go through the pain of implementing html email-templates or signatures: http://www.campaignmonitor.com/css/

I'ts a list of CSS support for most, if not all, CSS options, nicely compared between some of the most used email clients.

For centering, feel free to just use CSS (as the align attribute is deprecated in HTML 4.01 ).

 
 
 Your Content
answered May 31, 2012 at 8:21 Justus Romijn Justus Romijn 16k 5 5 gold badges 52 52 silver badges 63 63 bronze badges Doesn't work if you're centering a table or other block-level element. Commented Sep 24, 2012 at 3:23

You're right, I'm not sure if margin: 0 auto; is supported (in combination with a width ), but that usually works for browsers, but I'm not sure if email-clients come along well in that situation.

Commented Oct 2, 2012 at 9:38 Yeah I wasn't sure if all browsers would support it so went with the trusty but deprecated
tag.
Commented Oct 2, 2012 at 18:36

table align="center" . this aligns the table center of page.

Using td align="center" centers the content inside that td, useful for centered aligned text but you will have issues with some email clients centering content in sub level tables so using using td align as a top level method of centering your "container" table on the page is not the way to do it. Use table align instead.

Still use your 100% wrapper table too, purely as a wrapper for the body, as some email clients don't display body background colors but it will show it with the 100% table, so add your body color to both body and the 100% table.

I could go on and on for ages about all the quirks of html email dev. All I can say is test test and test again. Litmus.com is a great tool for testing emails.

The more you do the more you will learn about what works in what email clients.