CSS（カスケーディング・スタイル・シート）を使えば、HTMLウェブページを最高の見た目に仕上げることができます。ページの各要素は、CSSを使って好きなように配置することができます。水平方向にも、垂直方向にも配置できます。CSSボタンをウェブページの中央やdiv内に配置する場合は、中央揃えにする必要があります。
先に進む前に、このガイドの作成に協力してくれたkomik.dkに感謝したい。
CSSボタンを中央揃えにするには、以下の手順を使用します。
中央揃えtext-align – divタグのプロパティからtext-alignをcenterに変更するだけです。
margin: auto – プロパティ・ウィンドウでauto marginオプションを選択する。
position: fixed – position属性をfixedに設定する。
display: flex – display属性をflexに変更する。
display: grid – グリッドの表示属性を選択することで、グリッドを表示することができます。
1.bodyタグのtext-align属性（text-align: center）を中央揃えにする。
この例では、’body>タグの’text-align’ center属性を利用している。
2.親 div タグの text-align 属性を中央揃えにする（text-align: center）。
以下の例では、クラス（button-container-div）を持つdiv>要素で「text-align」centerプロパティを使用し、このdiv>内に含まれるものが自動的に中央揃えになるようにしています。
3.margin autoプロパティを使用して、CSSボタンを中央に配置します（Margin: auto）。
autoプロパティの「Margin」を利用している。Marginは自動的にdivを画面の中央に配置します。
4.固定位置のCSSボタンを使って中央に配置する。
この例では、ページの左側から50％のマージンを設定し、position: fixedを使って本文を中央に配置している。
5.displayプロパティにflexプロパティを指定する（display: flex）。
この例では、フレックスのプロパティ「display」とプロパティ「justify-content」、「align-items」をクラス（button-container-div）の親 div>タグに適用しています。div>に含まれるボタンは、縦軸と横軸の両方で中央に配置されます。
Justify-contentはボタンを水平方向にセンタリングします。
Align-itemsは中央に配置されます。そうでない場合は、divの最上部から始まり、下に向かって配置されます。
CSSでボタンを水平方向にセンタリングする方法
少し難しいかもしれませんが、要素の種類に関係なく、ボタンを中央に配置するための簡単なテクニックをご紹介します。
要素を中央に揃える
ブロック要素（div>など）を水平方向にセンタリングするには、margin: autoを使います；
要素の幅を設定することで、その要素がコンテナの境界を越えて拡大するのを防ぎます。
そうすると、要素は必要な幅いっぱいになり、2つの余白の間に等しいスペースが残ります：
このdiv要素は中央の位置にある。
inline-blockによるボタン要素
デフォルトでは、buttonとlink要素はdisplay: inline-blockに設定されています。inline-blockが設定された部分を、ページ上の文書の通常の左から右への流れの中で囲むことになります。
つまり、2つのインライン・ブロック・コンポーネントの間に十分な水平スペースがあれば、それらは並んで表示される。
これは、display: inlineが設定された要素と同じですが、inline-block要素は高さと幅を制御できますが、inline要素は制御できません。
text-align: centerを使用してテキストを中央揃えにする。
親要素にtext-align: centerを設定することで、インライン・ブロック（およびインライン）要素を中央に配置することができます。
button>要素はdiv>で囲まれ、text-align: centerが設定されています。
固定幅で、これはブロックボタン要素です。
Text-align: centerは、ブロック・コンポーネントを中央に配置するために使うことはできません。
ボタンの固定幅を設定する必要がある場合は、このテクニックを使ってボタンをページの中央に配置することができます。
幅200pxのボタンがあるとします。幅が200pxしかないにもかかわらず、隣接して追加要素を配置することはできません。
margin-leftとmargin-rightをautoに設定することで、ブロック-レベル要素を中央に配置することができます。これを行うには、margin: 0 autoという省略記法を使います。(これはmargin-topとmargin-bottomもゼロにします）。
フレックスボックスによる中央揃え
また、フレックスボックスを使えば、インライン・ブロック要素とブロック要素の両方を中央に配置することもできます。
ボタンを親div>で囲み、見えるようにする：center flexとjustify-content。
フレックスボックスの設定では、ボタンの水平方向と垂直方向の中央寄せが可能です。CSSのalign-itemsプロパティに値centerを指定することで、ボタン要素を水平方向に中央揃えすることができます。同時に、CSSのjustify-contentプロパティとcenter値を併用することで、ボタン要素を垂直方向に中央揃えすることができます。
ボタン要素を水平方向と垂直方向の中央に配置するには、値centerに加えて、CSSプロパティjustify-contentとalign-itemsを指定する必要があります。
CSS transformプロパティの利用
フレックスボックス・プロパティとは別に、CSSプロパティを使ってボタンを水平方向と垂直方向に中央揃えすることもできます。コンテナクラスとボタンを含むクラスに相対位置と絶対位置を追加します。ここで、left:50%とtop:50%を使って、ボタンをコンテナの中央に配置します。さらに、transform: translate (-50 percent ,-50 percent ) を利用します。
隣り合う2つのボタン
時には、2つのボタンを隣接させ、ページの中央に配置したい場合もあるでしょう。
両方のボタンを親div>で囲み、フレックスボックスを使ってページの中央に配置することで実現できます。
特筆すべきは、最初のボタンにmargin-right: 20pxを追加して、両ボタンを分けていることだ。
フレックスボックスとグリッドのCSSモデルを使ってボタンを中央に配置する
さらに、コンテナ要素の表示モードをフレックスまたはグリッドに変更し、justify-content: centerプロパティを追加することで、ボタン要素を中央に配置することができます。
例えば、div>をbutton>要素のコンテナとして使用する場合、このCSSルールはdiscontent>の水平方向を中央に配置します：
.center-h {
display: flex; /* または display:grid */。
justify-content: center；
}
フレックスボックスやグリッドのCSSアーキテクチャーを使う利点は、コンテンツを縦にも横にも中央に配置できることだ。
CSSでボタンを水平方向にセンタリングする方法についての最終的な考え
以上が、ボタンを水平方向にセンタリングするCSSの方法です。どの方法も、用途や目的に応じて、それなりに有益なものです。しかし、最良のテクニックはFlex-boxプロパティを利用することです。そしてもうひとつは、あなたの問題やシナリオに最も適していると思われる方法を、あなたが選択することです。
こちらのガイドもお読みください：HTMLで動画を中央に配置する方法
