0

I'm trying to shrink down an iframe that contains one of my other websites, but I want to maintain the scale and center it. Right now I have the scaling part figured out, but I can't seem to get it centered.

I've tried flex with justify-items: center & align-items: center on its parent, but it stays glued to the top left. I've also tried margin: auto which does nothing, but when I add margin-left it moves over a bit. If the parent has 100% width, and there is margin available, why wouldn't margin: auto center it? I'm confused.

Here's the html/jsx:

import './Desktop.css';
import desktopMockup from '../../assets/desktop.png';

const Desktop = ({ site }) => {

    const 

    return (
        <div className="desktop">
            <div className="iframeDesktop">
                <iframe src={site} scrolling="no" title="desktop" width="1920" height="1080"></iframe>
            </div>
            {/* <img src={desktopMockup} alt="desktop mockup" /> */}
        </div>
    );
};

export default Desktop;

And here's the css:

.desktop {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
}

.iframeDesktop {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-items:center;
}

iframe {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transform: scale(0.17);
    transform-origin: top left;
    min-width: 1920px;
    min-height: 1080px;
}

enter image description here

David Martin
  • 47
  • 5
  • [Does this answer your question?](https://stackoverflow.com/questions/1776915/how-can-i-center-an-absolutely-positioned-element-in-a-div) – selfagency Jun 23 '21 at 00:44

1 Answers1

0

I wonder if you could use transform-origin: top center; instead of transform-origin: top left;. Could you give that a try?

Jeremy Caney
  • 7,102
  • 69
  • 48
  • 77
NoName
  • 1