CSS Margin Center Work in Firefox Not in Chrome

Question

I want to make a Banner on the bottom the page with fixed position and freeze when scrolled.

.content {
      position: fixed;
      margin: 0% auto;
      left:0;
      right:0;
      bottom:0px;
      z-index: 999999999;
}

<table class="content">
    <tr>
        <td>
            <img src="logo.png">
        </td>
    </tr>
</table>

I use that setting and when did a test in firefox it's work perfectly but not in the Chrome, the banner position is still in the left, not center.

Someone can help me? I just want to make a banner in the bottom the page, fixed position(freeze when scrolled), margin-center. Thanks

i think you need to use `margin: 0 auto;`, the `%` is unnecessary — Ramon de Vries, Jan 04 '19 at 09:16
Try to use [footer](https://stackoverflow.com/questions/5189238/how-to-make-a-footer-fixed-in-the-page-bottom) if you want to make a banner in the bottom the page, fixed position(freeze when scrolled), margin-center. — Mukyuu, Jan 04 '19 at 09:24
I already use `margin: 0 auto;` but not work. It's will set to center if `position: auto;` but the banner position will at the end of the page (Not freeze) and the banner not in the front of the page. — benkmad, Jan 04 '19 at 09:28

score 0 · Accepted Answer · answered Jan 04 '19 at 10:19

margin: auto only works if that element has fixed width add width to you table.

Or

you can use below code I am using div instead of table which is better than table for footer. I have made the div flex and align the content to center.

.content {
    position: fixed;
    margin: 0 auto;
    left:0;
    right:0;
    z-index: 999999999;
    bottom:0px;
    display:flex;
    justify-content:center;
}

<div class="content"> 
  <img src="logo.png">
</div>

CSS Margin Center Work in Firefox Not in Chrome

1 Answers1