hbuilderのボックスを中央に配置するコードはどのように書きますか?

盒子を中央に配置するには、次の方法を使用します:

  1. margin:auto;を使用してください。
    例えば、以下のようにHTMLコードを記述してください:
  2. 私はボックスです
  3. 以下はCSSコードです:
  4. #myBox {
    幅: 200px;
    高さ: 200px;
    マージン: auto;
    }
  5. Flexboxレイアウトを使用することをお勧めします。
    例えば、以下はあなたのHTMLコードです:
  6. 私は箱です
  7. CSSコードは以下の通りです:
  8. #myContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* ボックスを垂直中央に配置するため、コンテナの高さをビューポートの高さにしてください */
    }
    #myBox {
    width: 200px;
    height: 200px;
    }

上記の2つの方法はどちらもボックスを中央に配置することができますので、必要に応じて選択してください。

bannerAds