The position of my document is negative of my margin (Margin 100, Position -100)

Question

I've got html for a table and I'm trying to center it

<table class="something">
    <tr>
        <td>words</td>
        <td>words2</td>
    </tr>
</table>

My CSS

table {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
}

When looking at the dev tools it says, left position : -775 and left margin : 775. right position : 775 and right margin : 775

The right side is as I expect but I can't seem to figure out why the left side is acting the way it does. If I modify the margin and position in the dev tools so its all 775 then it does what I'm expecting. Should I be using some other method for centering this?

In my HTML I do have a 2 other div elements that are above this table and one below.

@Phix From my understanding of css, since the table doesn't have any other parents I think its supposed to use the document as the parent and align itself based on it. So I thought this would be the best way to align it. — cs-isamiul, Feb 18 '21 at 00:26

score 0 · Accepted Answer · answered Feb 18 '21 at 00:23

0

Write these codes in your css file.

table {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

answered Feb 18 '21 at 00:23

Emin Başbayan

16
1

1

Hey thanks that worked! I guess I'll have to look at what transform does. Is there anything you can tell me about why top and left by themselves wouldn't work? – cs-isamiul Feb 18 '21 at 00:29

The position of my document is negative of my margin (Margin 100, Position -100)

1 Answers1