CSSでボタンを上下左右中央寄せにする方法２種

「ボタンを左右中央寄せにする方法はわかったけど、上下中央寄せにするにはどうやるんだろう？」

CSSでボタンを上下左右中央寄せにする方法を解説します。

ちなみに「ボタン」と言っていますが、ボタンに限らずなんでも上下左右中央寄せできます。

display:flexで上下左右中央寄せ

ボタンの親要素に「display: flex」と「align-items: center」と「justify-content: center」を指定しましょう。

<style>
.example{
    /*コレ*/display: flex;
    /*コレ*/align-items: center;
    /*コレ*/justify-content: center;
    height: 200px;
    background: #EEE;
    border: 1px solid #999;
}
.example a{
    display: block;
    padding: 10px;
    background: #b2e5dd;
    border: 1px solid #333;
    color: #333;
    width: 100px;
    text-align: center;
}
</style>
<div class="example">
    <a href="#">ボタン</a>
</div>

display: flexは子要素の位置を調整するCSSです。

align-itemsはflexとセットで使い、縦の位置を指定できます。

align-items: centerは上下中央寄せです。

justify-contentはflexとセットで使い、横の位置を指定できます。

justify-content: centerは左右中央寄せです。

display: flexについて詳しくはこちら↓

position:absoluteで上下左右中央揃え

ボタンの親要素に「position: relative」、ボタンに「position: absolute」、「top: 50%」、「left: 50%」、「transform: translateY(-50%) translateX(-50%)」を指定しましょう。

<style>
.example2{
    /*コレ*/position: relative;
    height: 200px;
    background: #EEE;
    border: 1px solid #999;
}
.example2 a{
    /*コレ*/position: absolute;
    /*コレ*/top: 50%;
    /*コレ*/left: 50%;
    /*コレ*/transform: translateY(-50%) translateX(-50%);
    display: block;
    padding: 10px;
    background: #b2e5dd;
    border: 1px solid #333;
    color: #333;
    width: 100px;
    text-align: center;
}
</style>
<div class="example2">
    <a href="#">ボタン</a>
</div>

position:absoluteは任意の位置調整ができるCSSです。

親要素にposition: relativeを指定し、基準を作ります。

position:absoluteとセットでtop: 50%とleft: 50%を指定します。

ただし、これだけでは下記のようにボタンの左上が真ん中になり少しずれています。

そこでtransform: translateY(-50%) translateX(-50%)を指定し、ボタンの横幅、高さそれぞれの半分ずつずれを戻すというものです。

positionについて詳しくはこちら↓

【まとめ】ボタンの上下左右中央寄せ

display:flexを使う方法

ボタンの親要素に「display: flex」と「align-items: center」と「justify-content: center」を指定

position:absoluteを使う方法

ボタンの親要素に「position: relative」、ボタンに「position: absolute」、「top: 50%」、「left: 50%」、「transform: translateY(-50%) translateX(-50%)」を指定

display:flexのほうが使うCSSが少なく覚えやすいので基本的にはflexをオススメします。

flexが使えない、要素を重ねたい、というようなときにはposition:absoluteを使いましょう。

以上、CSSでボタンを上下左右中央寄せにする方法でした。