html - Table will not show up under another table in middle of the webpage -

I have a table that is exactly in the middle of the page and I want to add another table under the first table. After adding the second table, I still want to be the first table among the webpage. Is there any way I can accomplish this?

Thank you!

  & lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Style & gt; Html {height: 100%; / * IE10 Consumer preview * / background-image: -MMS-linear-shield (bottom, #FFFFF0%, # 0 F1E80 100%); / * Mozilla Firefox * / background-image: -Mo-linear-shield (bottom, #FFFFF0%, # 0 F1E80 100%); / * Opera / / background-image: -o-linear-shield (bottom, #ffff 0%, # 0 F1E80 100%); / * WebKit (Safari / Chrome10) * / background-image: -WebKit-gradient (linear, left bottom, left top, color-stop (0, #FFFFFF), color-stop (1, # 0 F1E80 )); / * WebKit (Chrome 11+) * / background-image: -webkit-linear-gradient (bottom, #FFFFFF 0%, # 0F1E80 100%); / * W3C markup, IE10 release preview * / background-image: linear-shield (top, #FFFFF 0%, # 0 F1E80 100%); Background size: cover; } / * .tg {border-fall: collapse; Boundary-gap: 0; Status: fixed; Top: 50%; Left: 50%; Conversions: Translation (-50%, -50%); } .tg TD {font-size: 25px; Font-color: # 000000; Padding: 10px 5px; Hidden flurry; Explanation: Normal; } .tg th {font-size: 25px; Font-weight: normal; Font-color: # 000000; Padding: 10px 5px; Hidden flurry; Explanation: Normal; } * / .tg {border-collapse: collapse; Border-distance: 0; Status: fixed; Top: 50%; Left: 50%; Conversions: Translation (-50%, -50%); }. TG td {font-size: 14px; Padding: 10px 5px; Hidden flurry; } .tg th {font-size: 14px; Font-weight: normal; Padding: 10px 5px; Hidden flurry; } .tg ul.left_justify {padding: 0; Margins: Auto; List-style-type: none; Align text: left; } .TG UL Right_justify {padding: 0; Margins: Auto; List-style-type: none; Text align: right; } .a_font {font-size: 25px; Color: # 000000; Text-decoration: None; } .tc {float: center; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Table class = "tg" & gt; & Lt; TR & gt; & Lt; Th class = "TG-031A" & gt; & Lt; Ul class = "left_justify" & gt; & Lt; Li & gt; & Lt; One class = "a_font" href = "" & gt; My link & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; One class = "a_font" href = "" & gt; My link & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; One class = "a_font" href = "" & gt; My link & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; One class = "a_font" href = "" & gt; My link & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; One class = "a_font" href = "" & gt; My link & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Th & gt; & Lt; Th class = "TG-031A" & gt; & Lt; IMG src = "image.png" alt = "Oops!" & Gt; & Lt; / Th & gt; & Lt; Th class = "TG-031A" & gt; & Lt; Ul class = "right_justify" & gt; & Lt; Li & gt; & Lt; One class = "a_font" href = "" & gt; My link & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; One class = "a_font" href = "" & gt; My link & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; One class = "a_font" href = "" & gt; My link & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; One class = "a_font" href = "" & gt; My link & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; One class = "a_font" href = "" & gt; My link & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Th & gt; & Lt; / TR & gt; & Lt; / Table & gt; & Lt; Table & gt; & Lt; TR & gt; & Lt; Th & gt; This is a test & lt; / Th & gt; & Lt; / TR & gt; & Lt; / Table & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

instead .tg {left: 50%; Conversions: Translation (-50%, -50%);}

This bus .tg {margin-left: auto; Margin-Right: Auto;} and align each table with these two css properties.