Why do I get a different result from setting translate to -50% and setting margins to 50%?

Question

Assume the parent is relative, the child (style-x) is absolute. I used top 50%, left 25% to center the child.

I wish to actually center the child, so I set transform: translate(-50%, -50%). I am unsure if this is centered, so I double check by deleting that line and adding 'margin-top: -55px;' (half of the height), and 'margin-left: -45px;' (half of the width).

These two lines position my element in slightly different locations, yet this is different from my model of CSS. What's going on?

body {
  height: 100%;
  width: 100%;
  margin: 0 auto;
}
#main {
  overflow: auto;
  height: 64vh;
  width: 38vw;
  margin: 0 auto;
  margin-top: 10%;
  position: relative;
  border: 1vh solid black;
  overflow: hidden;
}
#style-x {
  /*Why doesn't translate(-50%, -50%) give me 
      the same position as setting the margin top and
      left to half of the width and height?*/
  width: 90px;
  height: 110px;
  /*
      transform: translate(-50%, -50%);*/
  margin-top: -55px;
  margin-left: -45px;
  position: absolute;
  top: 50%;
  left: 25%;
  padding: 2%;
  text-align: center;
  background: green;
}
#left-col {
  float: left;
  width: 4%;
  height: 101%;
  margin-left: 46%;
  background: black;
}
#right-col {
  float: left;
  width: 4%;
  height: 101%;
  margin: 0 auto;
  margin-left: 0;
  background: black;
}

<body>
  <section id='main'>
    <div id='style-x'>X</div>
    <div id='left-col'></div>
    <div id='right-col'></div>
    </section>
</body>

Here's my Codepen if you'd like a visualization.

http://codepen.io/sentedelviento/pen/ORyqzv

so you want the `style-x` center horizontally and vertically in `section`? just remove the margins and add in the `translate` you have and make `left` 50% — kukkuz, Sep 12 '16 at 05:16
Thanks, fixed. Why should I remove the margins? Why not take out the translate? I want to center it in the left half of section. — buriedinkant, Sep 12 '16 at 05:45

score 1 · Accepted Answer · edited May 23 '17 at 11:51

There is no problem in your method. Both will try to center based on the values you provide.

The margin method fails cos you aren't using a Box Sizing method like so.

box-sizing: border-box

This results in all your elements to be larger than the height and width specified. Without this, you are telling the browser to add any padding or border to both width & height.

And so your larger element shifts when using using the margin method.

You've set a 2% padding on style-x, and a width of 38vw on #main. When using margins to center things, you would need to account for these varying values.

When you set a percentage padding, its calculated based on the width of the containing block.

The transform method on the other hand, uses the bounding box of the containing block and has no problem centering a larger element.

I'd suggest you include this box-sizing on main and style-x if using the margin method. You could just use

*, after, before {
  box-sizing: border-box;
}

This gives better control over dimensions across all elements.

Why do I get a different result from setting translate to -50% and setting margins to 50%?

1 Answers1