中央配置には縦横方向それぞれにいくつか方法がありますが、最も簡単でわかりやすい方法を記載します。ここでいうボックスはブロックレベル要素に当たる<div>をいいます。
中央配置の設定方法
ボックスを横方向に中央配置
margin: auto;によってボックス(ブロックレベル要素)のみが横方向に中央配置であり、ボックスの子にあたるテキスト(インライン要素)については中央配置されずデフォルトの左寄せとなる。
使用するCSS
- margin: auto
- margin:autoによって左右のmarginを自動的に均等にするため、結果として中央配置となる。
style属性で記述
<div style="width: 80%; height: 200px; background-color: #ffcc99; margin: auto;">今の私には最も感銘の深い、忘れられない面影として記憶されてゐる。</div>
ボックスと共に文字を横方向に中央配置する
text-align: center; によってボックスの子孫にあたるテキスト(インライン要素)は全て横方向に中央配置となった。ブロックレベル要素に当たる水色の部分はデフォルトの左寄せのままです。
使用するCSS
- margin: auto
- margin:autoによって左右のmarginを自動的に均等にするため、結果として中央配置となる。
- text-align: center
- ボックス内のインライン要素を中央配置します。子や孫の要素にまで影響を及ぼす。
style属性で記述
<div style="width: 80%; height: 120px; background-color: #ffcc99; margin: auto; text-align: center;">今の私には最も感銘の深い、忘れられない面影として記憶されてゐる。 <div style="background-color: #99ccff; width: 80%;">このテキストも中央配置</div> </div>
ボックスと共に文字を全て横方向に中央配置する
水色の子要素について margin: auto; を指定したことで、子要素も中央配置にします。
使用するCSS
- margin: auto
- margin:autoによって左右のmarginを自動的に均等にするため、結果として中央配置となる。対象となるボックス全てについて指定する。
- text-align: center
- ボックス内のインライン要素を中央配置します。子や孫の要素にまで影響を及ぼす。つまり、親要素だけ指定すればよい。
style属性で記述
<div style="width: 80%; height: 120px; background-color: #ffcc99; margin: auto; text-align: center;">今の私には最も感銘の深い、忘れられない面影として記憶されてゐる。 <div style="background-color: #99ccff; width: 80%; margin: auto;">子要素のテキストも中央配置</div> </div>
ボックスを縦方向に中央配置する
position: absolute; によって縦方向の中央配置を実現します。
使用するCSS
- position: absolute
- ボックスを絶対配置にする。親要素をのpositionを必ずstatic以外(relativeやabsolute)に指定しなければならない。ここでは、黒いborderのdivのpositionをrerativeに指定している。子要素に影響は与えない。
- top: 50%
- 黒いborderのdivの配置位置から50%の位置に始点
- transform: translateY(-50%)
- Y方向に-50％移動させる。これによって中央配置となる。理屈よりもテクニックとして覚えてしまったほうが良い。
- margin: auto
- position: absolute; ではmargin: auto; は機能しないため指定しても意味はない。
style属性で記述
<div style="position: relative;" >
<div style="position: absolute; top: 50%; transform: translateY(-50%); width: 80%; height: 120px; background-color: #ffcc99; margin: auto; text-align: center;">今の私には最も感銘の深い、忘れられない面影として記憶されてゐる。
<div style="background-color: #99ccff; width: 80%; margin: auto;">子要素のテキストも中央配置</div>
</div>
</div>
ボックスを縦横方向に中央配置する
position: absolute; の場合、text-align: center; は機能しなくなります。
使用するCSS
- position: absolute
- ボックスを絶対配置にする。親要素をのpositionを必ずstatic以外(relativeやabsolute)に指定しなければならない。ここでは、黒いborderのdivのpositionをrerativeに指定している。子要素に影響は与えない。
- top: 50%
- 外の黒いborderのdivの配置位置から50%の位置に始点
- transform: translateY(-50%)
- Y方向に-50％移動させる。これによって中央配置となる。
- left: 50%
- 外の黒いborderのdivの配置位置から50%の位置に始点
- transform: translateX(-50%)
- X方向に-50％移動させる。これによって中央配置となる。
style属性で記述
<div style="position: relative;" >
<div style="position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 80%; height: 120px; background-color: #ffcc99; text-align: center;">今の私には最も感銘の深い、忘れられない面影として記憶されてゐる。
<div style="background-color: #99ccff; width: 80%; margin: auto;">子要素のテキストも中央配置</div>
</div>
</div>
ボックスを子孫を含め縦横方向に中央配置する
position: absolute; の対象をdivでグループ化します
設計方法
縦横方向に中央配置したいグループ(緑色のグループ)をdivで囲み、position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);と指定する。
使用するCSS
- position: absolute
- ボックスを絶対配置にする。親要素をのpositionを必ずstatic以外(relativeやabsolute)に指定しなければならない。ここでは、黒いborderのdivのpositionをrerativeに指定している。子要素に影響は与えない。
- top: 50%
- 外の黒いborderのdivの配置位置から50%の位置に始点
- transform: translateY(-50%)
- Y方向に-50％移動させる。これによって中央配置となる。
- left: 50%
- 外の黒いborderのdivの配置位置から50%の位置に始点
- transform: translateX(-50%)
- X方向に-50％移動させる。これによって中央配置となる。
style属性で記述
<div style="position: relative;>
<div style="position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 80%; height: 120px; background-color: #ffcc99;">
<div style="position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 80%; text-align: center; background-color: #99cc00;">今の私には最も感銘の深い、忘れられない面影として記憶されてゐる。
<div style="background-color: #99ccff; width: 80%; margin: auto;">子要素のテキストも中央配置</div>
</div>
</div>
</div>
画像imgの扱い
<img>はインライン要素ですから、テキスト(インライン要素)と同じようにtext-alignの影響をうけます。勘違いせずにインライン要素として扱ってください。
注意
テキストと同様、横方向中央配置であれば親要素でtext-align:centerとすればよいが、縦方向についても中央配置するには、position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);と指定する。
使用するCSS
- text-align: center
- ボックス内のインライン要素を中央配置します。子や孫の要素にまで影響を及ぼす。つまり、親要素だけ指定すればよい。
style属性で記述
<div style="position: relative; text-align: center;"> <img style="border: 1px solid #444444;" src="mark.jpg" width="100" height="100" /> </div>
注意点
vertical-align はおすすめしません。縦方向中央配置する場合は、全てposition: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); によって記述することをお薦めします。
段組みの場合に中央配置するときは、height:100% としたうえで、position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); とします。
使用したCSSなどの説明
