我該如何正確居中呢？

移動版看起來不錯（375x667）在桌面版中，無論高度有多大，我都希望它位于螢屏中央。

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

      <section class="price">
        <h1>$149.99</h1>
        <p>$169.99</p>
      </section>
      <div class="buy">
        <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>

我似乎無法垂直對齊它。

我試過 position: absolute 但它只是洗掉了背景顏色。我使用了 margin-top: 50% 但它仍然不會居中。transform: translateY(50%) 也沒有完成它的作業。

我不知道我設定容器高度的方式是否有問題？

我該怎么做才能解決這個問題？

uj5u.com熱心網友回復：

將某些東西放在螢屏中央的最簡單方法是：

• 將body元素設定為 100vh
• 將元素的display屬性設定為。bodygrid
• 使用place-items: center。

見下文

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

      <section class="price">
        <h1>$149.99</h1>
        <p>$169.99</p>
      </section>
      <div class="buy">
        <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>

標籤：网页格式CSS位置转换利润

上一篇：鏈接到網站上的部分時，只滾動一列而不是整個頁面

下一篇：把滾動條放在div外面