Archive

Archive

上下左右中心に配置するCSS

  • ホーム
  • Archive
  • 上下左右中心に配置するCSS
2025.10.29コード

ダイアログボックスなどで使用するような幅指定せずに上下左右中心に配置にするセンターボックスのHTMLとCSSのコードです。
全体を「center-box__wrapper」のクラスで囲い、中心には「center-box」というクラスの中に書く。

・画面全体をrelativeに設定
・中心になる要素を絶対配置
・要素をtransformで中心に位置調整

<div class="centerBox">
 <div class="centerBox__content">
  <p>
   センターボックスの中に入る要素です。<br>
   センターボックスの中に入る要素です。<br>
   センターボックスの中に入る要素です。<br>
   センターボックスの中に入る要素です。<br>
  </p>
  <!-- /.centerBox__content --></div>
<!-- /.centerBox --></div>
.centerBox{
 background:#000;
 height:100vh;
 width:100vw;
 display:block;
 position:relative; 
}
.centerBox__content{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translateY(-50%) translateX(-50%);
}
.centerBox{
 background:#000;
 height:100vh;
 width:100vw;
 display:block;
 position:relative;
 &__content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
 }
}

デモページはこちら

最新の記事
The Interval Between
the Suffering and Joy of Continuing
カテゴリー
Classification pizza mocks
for flapping
タグ
What flavor was the roasted
sweet potato you ate yesterday?
ページ上部に戻るスプーン