3

I have a div (.content) that has a transform-origin: top left and I need to center it. The thing is, I can only modify CSS of its wrapper (.wrap), but not of the actual div. I've, of course, tried margin: 0 auto, but that's not working. And neither is position: absolute (with left and right set as 0), though if I can avoid using absolute, even better.

Is there any way I can center this div?

This is the outline of my HTML and CSS:

/* The part of CSS that I can't modify */

.content {
  height: 350px;
  width: 350px;
  background-color: darkblue;
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -o-transform: scale(0.7);
  transform: scale(0.7);
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  transform-origin: top left;
}


/* The part of CSS that I can modify */

.wrap {
  margin: 0 auto;
}
<div class="wrap">
  <div class="content"></div>
</div>

Thanks!

Retros
  • 3,511
  • 10
  • 40
  • 60
  • 1
    Flexbox is probably the right solution here. – Paulie_D Jun 22 '18 at 15:04
  • you should probably ask the question differently ... you should say that you need to center **considering** the scale applied – Temani Afif Jun 22 '18 at 15:05
  • It would still be centered...it would just **appear** not to be. anything else would require JS I suspect. – Paulie_D Jun 22 '18 at 15:10
  • try this : https://jsfiddle.net/h5erkoxt/1/ you have to add some margin left to cancel the scale effect – Temani Afif Jun 22 '18 at 15:19
  • @Paulie_D if the values are known with some calculation we can make it centred – Temani Afif Jun 22 '18 at 15:20
  • Indeed, but I suspect I'm assuming a dynamic solution is required. If fixed values are in play then we can "undupe" >) – Paulie_D Jun 22 '18 at 15:21
  • Yeah, I'm afraid it needs to be dynamic. Thanks for the link Paulie, I tried the flexbox option but yeah, since I have several of these .content divs with different fixed heights and widths, it doesn't center them all properly. – Retros Jun 22 '18 at 15:34
  • Then I'm afraid JS is your solution. If you edit the question to express that I'd be happy to re-open it. But you should be aware that a `transform` is **entirely** visual so layout is *not actually affected*. – Paulie_D Jun 22 '18 at 15:40
  • and why you don't simply change the transform origin to center? – Temani Afif Jun 22 '18 at 15:58
  • @TemaniAfif I can't touch the .content div css. That has to stay unchanged. – Retros Jun 22 '18 at 15:59
  • @TemaniAfif If they're all 185px width on smaller screens, how do I use margin-left: calc that you suggested? – Retros Jun 22 '18 at 16:02
  • 1
    as you can see in the calc the formula is (width * scale / 2) – Temani Afif Jun 22 '18 at 16:09

0 Answers0