I-Frame embed not centering - HTML

Question

Currently my webpage looks like this when I add the "Guilded" embed:

While this looks decent, I want the Iframe centered, the only issue being is that I can't seem to center it. I do not want to add anything in CSS as this is a one time embed, and I don't really want to mess anything else up. Here's the embed code:

<div className="auth-form-container" style={{display: "flex", justifyContent: "center", position: "absolute"}}>
            <img src={logo} alt="VaporCode Logo"></img>
            <h2 style={{ color: 'white' }}>Login</h2>
            <form className="login-form" onSubmit={handleSubmit}>
                <label htmlFor="email" style={{ color: 'white' }}>Email</label>

      <input value={email} onChange={(e) => setEmail(e.target.value)}type="email" placeholder="Email" id="email" name="email" />
                <label htmlFor="password" style={{ color: 'white' }}>Password</label>
                <input value={pass} onChange={(e) => setPass(e.target.value)} type="password" placeholder="Password" id="password" name="password" />
                <button type="submit">Log In</button>
            </form>
            <linkbutton className="link-btn" onClick={() => props.onFormSwitch('register')}>Don't have an account? Register here.</linkbutton>
            <iframe src="https://www.guilded.gg/canvas_index.html?route=%2Fcanvas%2Fembed%2Fbadge%2F4R5YgKWR" width="294" height="48" frameborder="0">
        </div>

Here's the css (Please keep in mind that I am using React.Js so I didn't reference the css in the HTML, but it's referenced none the less.):

App {
  text-align: center;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  color: #000000;
  background-image: linear-gradient(79deg, #073a8c, #281369 48%, #135b69);
}

.auth-form-container, .login-form, .register-form {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 600px)  {
  .auth-form-container {
    position:absolute;   
    justify-content: center;
    padding: 1rem;
    border: solid #222222;
    background-color: #000000;
    fill: solid #000000;
    border-radius: 10px;
    margin:30rem;
  }
}

label {
  text-align: left;
  padding: 0.25rem 0;
}
input {
  margin: 0.5rem 0;
  padding: 1rem;
  border: none;
  border-radius: 10px;
}


button {
  border: none;
  background-image: linear-gradient(79deg, #ff893f, #fa8d90 48%, #e769d1);
  padding: 20px;
  border-radius: 10px;
  cursor: pointer;
  color: #ffffff;
  font-weight : bold;
  transition-duration: 2s;
}


linkbutton {
  border: none;
  padding: 20px;
  border-radius: 10px;
  cursor: pointer;
  color: #ffffff;
}

.link-btn {
  background: none;
  color: white;
  text-decoration: underline;
}
img {
    margin: 0 auto;
    max-width: 10%;
    height: 10%;
}

In the end I want this centered in the container. And I'm not sure how...

I tried to turn on absolute positing, and then justifying it to center. I also tried a recommendation in another post, but all to no avail. I'm new to Html and would love some help. I noticed some of the content might be cut off. This is due to me programming over ssh lol, just fill in the blanks...

-Thanks :)

Answer 1

If the goal is to get this centered without touching the CSS file, here is a basic solution: wrap the iframe using a flex container with justify-content: center property.

Updated example to the React syntax needed here.

To test this, use it to replace the original iframe tag.

    <div style={{display: "flex", justifyContent: "center"}}>
      <iframe
        src="https://www.guilded.gg/canvas_index.html?route=%2Fcanvas%2Fembed%2Fbadge%2F4R5YgKWR"
        width="294"
        height="48"
        frameborder="0"
      ></iframe>
    </div>

Update

Full example with your updated code:

<div className="auth-form-container">
  <img src={logo} alt="VaporCode Logo" />
  <h2 style={{ color: "white" }}>Login</h2>
  <form className="login-form" onSubmit={handleSubmit}>
    <label htmlFor="email" style={{ color: "white" }}>
      Email
    </label>

    <input
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      type="email"
      placeholder="Email"
      id="email"
      name="email"
    />
    <label htmlFor="password" style={{ color: "white" }}>
      Password
    </label>
    <input
      value={pass}
      onChange={(e) => setPass(e.target.value)}
      type="password"
      placeholder="Password"
      id="password"
      name="password"
    />
    <button type="submit">Log In</button>
  </form>
  <linkbutton
    className="link-btn"
    onClick={() => props.onFormSwitch("register")}
  >
    Don't have an account? Register here.
  </linkbutton>

  <div style={{ display: "flex", justifyContent: "center" }}>
    <iframe
      src="https://www.guilded.gg/canvas_index.html?route=%2Fcanvas%2Fembed%2Fbadge%2F4R5YgKWR"
      width="294"
      height="48"
      frameborder="0"
    ></iframe>
  </div>

</div>