【html/CSS】formを中央寄せする方法

「formを中央寄せするにはどうすればいいの!?」

formを中央寄せする方法を解説します。

【方法1】formにmargin:auto

下記は背景青の部分がformタグです。

form自身にwidthとmargin:autoを指定することで中央寄せできます。

お名前
住所

<style>
.example{
    /*コレ*/width: fit-content;
    /*コレ*/margin: auto;
    border: 1px solid #333;
    background: #e3f5ff;
}
</style>
<form class="example">
    <table border="1">
        <tr>
            <td>お名前</td><td><input type="text"></td>
        </tr>
        <tr>
            <td>住所</td><td><input type="text"></td>
        </tr>
    </table>
    <div><input type="button" value="送信"></div>
</form>

formはブロック要素です。

ブロック要素を中央寄せするにはauto以外のwidthを指定し、margin:autoを指定することで可能です。

fit-contentは子要素の幅に合わせる値です。

【方法2】中身にmargin:auto

formはそのままに、中身を中央寄せする考え方です。

中身（ここではtable）を中央寄せするためにそれにmargin:autoを指定します。

お名前
住所

<style>
.example2{
    border: 1px solid #333;
    background: #e3f5ff;
}
.example2 table{
    /*コレ*/margin: auto;
}
.example2>div{
    text-align: center;
}
</style>
<form class="example2">
    <table border="1">
        <tr>
            <td>お名前</td><td><input type="text"></td>
        </tr>
        <tr>
            <td>住所</td><td><input type="text"></td>
        </tr>
    </table>
    <div><input type="button" value="送信"></div>
</form>

tableはwidthを指定しなくてもmargin:autoだけで中央寄せできます。

tableではなく、divで囲っている場合はdivにauto以外のwidthを指定しましょう。

送信ボタン部分はtableの外にあるため個別に中央寄せする必要があります。

ボタンはinline-block要素であるため、text-align:centerで中央寄せできます。

【方法3】justify-content:center

あまりないとは思いますが、margin:autoが使えないというときはjustify-content:centerでも中央寄せできます。

justify-contentはdisplay:flexとともに指定し、子要素に横方向の位置を指定するCSSです。

お名前
住所

<style>
.example3{
    /*コレ*/display: flex;
    /*コレ*/justify-content: center;
    border: 1px solid #333;
    background: #e3f5ff;
}
.example3>div{
    border: 1px solid #333;
    background: #FFF;
}
</style>
<form class="example3">
    <div>
        お名前<input type="text"><br>
        住所<input type="text"><br>
        <input type="button" value="送信">
    </div>
</form>

【まとめ】formを中央寄せする方法

【方法1】formにwidthとmargin:autoを指定する
【方法2】中身にmargin:autoを指定する
【方法3】formにdisplay:flexとjustify-content:centerを指定する

以上、formを中央寄せする方法でした。