How do I properly center this?-CodePudding

The mobile version looks fine (375x667) In the desktop version, I want it to be at the center of the screen no matter how big the height is.

.container {
  height: 100%;
  margin: auto;
  min-width: 92%;
  max-width: 92%;
  background-color: white;
  margin-top: 1.5em;
  border-radius: .75em;
  margin-bottom: 1.5em;
}

.container img {
  margin: auto;
  width: 100%;
  border-top-left-radius: .75em;
  border-top-right-radius: .75em;
  margin: 0;
}

@media only screen and (min-width: 1400px) {
  .container {
    min-width: unset;
    justify-content: center;
    display: grid;
    width: 42%;
    grid-template-columns: repeat(2, 50%);
  }
}

<div>
  <div >
    <img src="/images/image-product-mobile.jpg" >
    <img src="/images/image-product-desktop.jpg" >
    <div >
      <h2> P E R F U M E </h2>
      <h1 > Gabrielle Essence Eau De Parfum</h1>
      <p > A floral, solar and voluptous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>

      <section >
        <h1>$149.99</h1>
        <p>$169.99</p>
      </section>
      <div >
        <button type="button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16"><path d="M14.383 10.388a2.397 2.397 0 0 0-1.518-2.222l1.494-5.593a.8.8 0 0 0-.144-.695.8.8 0 0 0-.631-.28H2.637L2.373.591A.8.8 0 0 0 1.598 0H0v1.598h.983l1.982 7.4a.8.8 0 0 0 .799.59h8.222a.8.8 0 0 1 0 1.599H1.598a.8.8 0 1 0 0 1.598h.943a2.397 2.397 0 1 0 4.507 0h1.885a2.397 2.397 0 1 0 4.331-.376 2.397 2.397 0 0 0 1.12-2.021ZM11.26 7.99H4.395L3.068 3.196h9.477L11.26 7.991Zm-6.465 6.392a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Zm6.393 0a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Z" fill="#FFF"/></svg>
                     Add to Cart
                </button>
      </div>
    </div>
  </div>
</div>

I just can't seem to vertically align it.

I tried position: absolute but it just removed the background color. I used margin-top: 50% but it still won't center. transform: translateY(50%) didn't do its job either.

I don't know maybe there's something wrong with the way I set the container's height?

What can I do to fix this?

CodePudding user response：

The easiest way to place something at the centre of the screen is to:

Set the body element to 100vh
Set the display property on the body element to grid.
Use place-items: center.

See below

body {
  height: 100vh;
}

.container {
  height: 100%;
  margin: auto;
  min-width: 92%;
  max-width: 92%;
  background-color: white;
  margin-top: 1.5em;
  border-radius: .75em;
  margin-bottom: 1.5em;
}

.desktop {
  display: none;
}

.container img {
  margin: auto;
  width: 100%;
  border-top-left-radius: .75em;
  border-top-right-radius: .75em;
  margin: 0;
}

@media only screen and (min-width: 1400px) {
  body {
    display: grid;
    place-items: center;
  }
  .container {
    min-width: unset;
    display: grid;
    width: 42%;
    grid-template-columns: repeat(2, 50%);
  }
  .mobile {
    display: none;
  }
  .desktop {
    display: unset;
  }
}

<div>
  <div >
    <img src="https://www.fillmurray.com/200/200" >
    <img src="https://www.fillmurray.com/500/500" >
    <div >
      <h2> P E R F U M E </h2>
      <h1 > Gabrielle Essence Eau De Parfum</h1>
      <p > A floral, solar and voluptous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>

      <section >
        <h1>$149.99</h1>
        <p>$169.99</p>
      </section>
      <div >
        <button type="button">
            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16">
              <path
                d="M14.383 10.388a2.397 2.397 0 0 0-1.518-2.222l1.494-5.593a.8.8 0 0 0-.144-.695.8.8 0 0 0-.631-.28H2.637L2.373.591A.8.8 0 0 0 1.598 0H0v1.598h.983l1.982 7.4a.8.8 0 0 0 .799.59h8.222a.8.8 0 0 1 0 1.599H1.598a.8.8 0 1 0 0 1.598h.943a2.397 2.397 0 1 0 4.507 0h1.885a2.397 2.397 0 1 0 4.331-.376 2.397 2.397 0 0 0 1.12-2.021ZM11.26 7.99H4.395L3.068 3.196h9.477L11.26 7.991Zm-6.465 6.392a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Zm6.393 0a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Z"
                fill="#FFF" />
            </svg>
            Add to Cart
          </button>
      </div>
    </div>
  </div>
</div>