【CSS】padding:autoで中央寄せできるのか解説

中央寄せといえば「margin:auto」ですね。

marginとよく似たCSSである「padding」でも同じように中央寄せできないのだろうか？

CSS paddingで中央寄せできるのか解説します。

【結論】padding:autoはない。数値で指定できるなら中央寄せ可能

まず、marginと違いpaddingにautoは指定できません。

下記は「padding: auto」を指定してみた例です。padding:autoが効いていないことがおわかりでしょう。

<style>
.example{
    /*効かないよ*/padding: auto;
    border: 1px solid #333;
    background: #f2f2f2;
}
</style>
<div class="example">padding:auto</div>

paddingは数値による指定のみ可能です。

左右上下を同じ数値にすることで疑似的に中央寄せが可能です。

<style>
.example2{
    padding: 30px;
    display: inline-block;
    border: 1px solid #333;
    background: #f2f2f2;
}
</style>
<div class="example2">padding: 30px</div>

文字を中央寄せしたいなら「text-align:center」

paddingで中央寄せしたいということは要素の中身を中央寄せしたいんですよね。

それならtext-align:centerが適切です。

<style>
.example3{
    text-align:center;
    padding: 30px;
    border: 1px solid #333;
    background: #f2f2f2;
}
</style>
<div class="example3">text-align:center</div>

ブロック要素を中央寄せしたいなら「margin:auto」

要素の中身がブロック要素の場合「text-align:center」では中央寄せできません。中央寄せしたい要素自身に「margin:auto」を指定しましょう。

<style>
.example4{
    padding: 30px;
    border: 1px solid #333;
    background: #f2f2f2;
}
.example4>div{
    margin: auto;
    width: 200px;
    padding: 30px;
    border: 1px solid #333;
    background: #FFF;
}
</style>
<div class="example4">
    <div>margin:auto</div>
</div>

文字でもブロック要素でも中央寄せできる「display: flex; justify-content: center」

display: flexとjustify-content: centerを指定すると子要素が文字でもブロック要素でも中央寄せできます。

<style>
.example5{
    display: flex;
    justify-content: center;
    padding: 30px;
    border: 1px solid #333;
    background: #f2f2f2;
}
.example5>div{
    width: 250px;
    padding: 30px;
    border: 1px solid #333;
    background: #FFF;
}
</style>
<div class="example5">
    <div>display: flex;<br>justify-content: center;</div>
</div>

ただし、display: flexはいろいろできるぶんコツが必要ですのでどんなCSSかしっかり確認しましょう。

まとめ

• padding:autoはない
• paddingを数値で指定することで疑似的な中央寄せが可能
• 文字を中央寄せしたいなら「text-align:center」
• ブロック要素を中央寄せしたいなら「margin:auto」
• 文字でもブロック要素でも中央寄せできる「display: flex; justify-content: center」

以上、padding:autoで中央寄せできるのか解説しました。