はじめに

Webサイト内のテキストを上下左右中央に配置したい、というケースは多いと思います。私の場合は、特にナビゲーションメニューやボタンを作る時に利用する頻度が高いです。

ひとくちに中央配置（中央寄せ）といっても、いくつか方法がありますので、ボタンを作成を例に、実際に私が行っているCSS設定を紹介します。

上から紹介する順に私の使用頻度が高い方法が並んでいます。それぞれメリット・デメリットがありますので、私は状況に応じて使い分けています。

目次

text-align:centerとline-heigtによる設定

左右の中央寄せをtext-align:centerで行い、line-heightで上下の中央寄せを行います。

ボタンの縦幅とline-height（行間）のサイズを同じにする事で、縦方向の中央にテキストを配置することができます。

HTML

<a href="#" class="example1">button</a>

CSS

.example1 {
　display: inline-block;
　width:200px;
　height:60px;
　line-height: 60px;
　background: #338DC9;
　color: #eee;
　text-align: center;
　text-decoration: none;
}

できあがったもの

個人的にはhtml、css共に一番シンプルで分かりやすい記述で、ボタンが1行の時にはよく使用しています。

非常に使いやすい記述なのですが、ボタンの縦幅 = 1行の縦幅となるため、テキストが2行以上になるとレイアウトが崩れます。

現象の再現（2行の時）

行間が広がるため、2行目のテキストがボタンの下に配置されてしまいます。

CSSのheightを削除しても良いのですが、いずれにしても1行の高さが大きくなりすぎるので、複数行の場合には使用できません。

デメリット

display:flexを使用する場合

文章などテキストが2行以上続く場合は、display:flexを使用して、左右の中央寄せをjustify-content: centerで行い、align-items: center;で上下の中央寄せを行っています。

恐らく一番スタンダードな方法じゃないでしょうか。

HTML

<a href="#" class="example2">button</a>

CSS

.example2 {
　display:flex;
　align-items: center;
　justify-content: center;
　width:200px;
　height:60px;
　background: #338DC9;
　color: #eee;
　text-decoration: none;
}

できあがったもの

この方法だと、テキストが2行になっても崩れずに配置されます。

現象の再現（2行の時）

上記CSSでは割愛していますが、flexboxを使用する場合はベンダープレフィックスが必要になります。

その他、デメリットを挙げるとすれば以下のとおりです。

デメリット

transformを使用する場合

ボタンの入れ子で子要素を作り、transformを設定することで縦横方向に移動させる方法です。

position: absoluteで位置を絶対値指定した上でtop:50%left:50%を指定します。

入れ子自身の大きさだけ右下方向にズレますのでtransform: translateX(-50%) translateY(-50%)でズレを調整します。

HTML

<a href="#" class="example3"><span>button</span></a>

.example3 {
　position: relative;
　display: inline-block;
　width:200px;
　height:60px;
　background: #338DC9;
　color: #eee;
　text-decoration: none;
}
.example3 span {
　position: absolute;
　top:50%;
　left:50%;
　transform: translateX(-50%) translateY(-50%);
}

できあがったもの

注意点としては親要素にposition:relativeを記述し忘れると配置が崩れる事があります。

また、テキストが長い半角英数の場合、枠をはみ出して表示されてしまいます。

同様に全角の場合は、意図しない箇所で改行される場合があります。

現象の再現（半角テキストが長い場合）

現象の再現（全角テキストが長い場合）

これもよく使う方法ですが、子要素を作るぶん利用頻度が若干落ちます。

デメリット

top bottom left rightを0で設定

ここから先は、私はあまり使わない方法になります。

使わない　=　悪い、という訳ではなく、上記3つのパターンでほぼ解決するからです。

この方法はtop:0bottom:0left:0right:0を設定した上でmargin: autoで上下左右中央配置させます。

当初、上の3つのパターンと同じようにテキストを入れようと、子要素はspanで設定してみたのですが、spanでは中央寄せができませんでした（divでもできませんでした）。やり方が悪かったのでしょうか。

imgだと配置できたので、画像の中央配置には有効だと思います。

HTML

<a href="#" class="example4"><img src=" 画像のパス " alt=""></a>

CSS

.example4 {
　position: relative;
　display: inline-block;
　width:200px;
　height:60px;
　background: #338DC9;
　color: #eee;
　text-decoration: none;
}
.example4 img {
　position: absolute;
　top:0;
　bottom:0;
　left: 0;
　right: 0;
　margin: auto;
}

できあがったもの（画像を使用した時）

テキストを使用すると以下のようになります（テキストはspanで入れ子にしています）。

現象の再現（テキストを使用した時）

デメリット

display:tableおよびtable-celを使用した場合

display: tableを使ってテーブル化する方法です。

子要素をdisplay: table-cellとすることで、text-align: centerとvertical-align: middleで上下左右に中央寄せができるようになります。

これといったデメリットは見受けられないのですが、私はあまり使用していませんし、使用しているケースを何故か上のパターンほど見ません。

HTML

<a href="#" class="example5"><span>button</span></a>

CSS

.example5 {
　position: relative;
　display: table;
　width:200px;
　height:60px;
　background: #338DC9;
　color: #eee;
　text-decoration: none;
}
.example5 span {
　display: table-cell;
　text-align: center;
　vertical-align: middle;
}

できあがったもの

いくつかパターンを覚えておくと、うまくレイアウトできない時の選択肢ができてコーディング時に役立つと思います。