Vertically center a table using <div> not working in Safari <p>I want to center align a Table VERTICALLY in html. I am using the following code which is working on all browsers except SAFARI. I need this to work in safari too. What is going wrong? Any help will be appreciated.</p> <p>HTML:</p> <pre><code>&lt;div tabindex="0" title="Style1" class="button_class size_class" role="button" aria-pressed="false" style="display: table;" unselectable="on"&gt; &lt;div class="Container" aria-hidden="true" style="text-align: center; vertical-align: middle; display: table-cell;"&gt; &lt;table class="Preview"&gt; &lt;tbody&gt; &lt;tr&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;td style=""&gt;—&lt;/td&gt;&lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>.button_class { border:1px solid transparent; display:inline-block; margin-left:0px; margin-right:2px; } .size_class { width:74px; height:58px; overflow:hidden; } .container { height: 48; width: 64; white-space: nowrap; overflow: hidden; } .preview { height: 32px; width: 64px; white-space: nowrap; overflow: hidden; vertical-align: baseline; display: block; } </code></pre>