CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで要素を垂直方向に中央揃えする方法

CSSで要素を垂直方向に中央揃えする基本の考え方

CSSで要素を垂直方向に中央揃えにしたい場合、最もシンプルな方法の一つが上下のパディング（padding）を利用する手法です。要素の上部と下部に均等なパディングを設定することで、中身のテキストや画像が視覚的に中央に配置されているように見せることができます。

この方法は単純なレイアウトには手軽で有効ですが、高さが固定されたコンテナ内で厳密にセンタリングしたいケースでは、Flexboxなどのモダンな手法の方が適しています。まずは基本的なpaddingを使った例から見ていきましょう。

サンプルコード

以下のコードを実行すると、paddingプロパティを使ってdiv要素を垂直方向に中央揃えできます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .center {
            padding: 50px 0;
            border: 2px solid blue;
         }
      </style>
   </head>
   <body>
      <h2>垂直方向の中央揃え</h2>
      <p>この例では、paddingプロパティを使用してdiv要素を垂直方向に中央揃えしています。</p>
      <div class="center">
         <p>私は垂直方向に中央揃えされています。</p>
      </div>
   </body>
</html>

表示結果

CSSで要素を垂直方向に中央揃えする方法

青い枠線で囲まれたdiv要素の内部で、テキストが上下に均等な余白を持って配置され、中央揃えになっていることが確認できます。padding: 50px 0;は「上下に50px、左右に0」を意味しており、この上下の余白が視覚的な中央寄りを実現しています。

補足：Flexboxを使ったより正確な中央揃え

padding方式は簡易的ですが、コンテンツの高さが変動する場合や厳密な中央配置が必要な場合は、Flexbox（フレックスボックス）の利用がおすすめです。親要素に以下のように指定するだけで、子要素を垂直方向の中央に配置できます。

.container {
  display: flex;
  align-items: center;
  height: 200px;
}

用途に応じて、padding方式・line-height方式・Flexbox方式を使い分けることで、さまざまなレイアウト要件に柔軟に対応できるでしょう。

  1. CSSでボタンを上下左右の中央に配置する方法【Flexbox活用】

    CSSでボタンを垂直方向・水平方向の中央に配置するには、Flexbox（フレックスボックス）を使うのが最も簡単で確実な方法です。親要素にdisplay: flex;を指定し、justify-content: center;で水平方向の中央揃え、align-items: center;で垂直方向の中央揃えを実現できます。 コード例 <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Ve

  2. CSSで要素を垂直方向・水平方向に中央揃えする方法

    CSSで要素を垂直方向と水平方向の両方に中央揃えしたい場合、最も簡単で推奨される方法はFlexbox（フレックスボックス）を使うことです。親要素に display: flex を設定し、justify-content: center と align-items: center を指定するだけで、子要素を中央に配置できます。 Flexboxを使った中央揃えの実装例 <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Genev