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

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

CSSでボタンを垂直方向・水平方向の中央に配置するには、Flexbox（フレックスボックス）を使うのが最も簡単で確実な方法です。親要素にdisplay: flex;を指定し、justify-content: center;で水平方向の中央揃え、align-items: center;で垂直方向の中央揃えを実現できます。

コード例

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .centered {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        border: 3px solid rgb(0, 70, 128);
    }
    button{
        font-size: 18px;
        border: none;
        padding:10px;
        background-color: darkblue;
        color:white;
    }
</style>
</head>
<body>
<h1>Centering Example</h1>
<div class="centered">
<button>This button is centered</button>
</div>
</body>
</html>

実行結果

上記のコードを実行すると、ボタンが青色の枠線を持つコンテナのど真ん中に配置された状態で表示されます。

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

ポイント解説

  • display: flex; … 親要素をフレックスコンテナとして設定し、子要素を柔軟にレイアウトできるようにします。
  • justify-content: center; … 主軸方向（デフォルトでは水平方向）に対して子要素を中央に配置します。
  • align-items: center; … 交差軸方向（デフォルトでは垂直方向）に対して子要素を中央に配置します。
  • height: 200px; … 親要素に高さを設定することで、垂直方向のセンタリング効果が視覚的にわかりやすくなります。

この方法はモダンブラウザすべてでサポートされており、ボタンだけでなくテキストや画像など任意の要素の中央配置にも応用できます。

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

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

  2. CSSでWebサイト全体を水平方向に中央揃えする方法

    CSSを使ってWebサイトのコンテンツを水平方向（左右）に中央揃えするには、max-width と margin: auto を組み合わせるのが最もシンプルで定番の方法です。コンテナ要素の最大幅を指定し、左右のマージンを自動（auto）に設定することで、画面サイズに関わらず要素が常に中央に配置されます。以下に、実際のコード例を示します。コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-sc