古い HTML では <center> を用いていましたが、見栄えを HTML で制御するのはよくないというポリシーにより廃止されていますので、使用すべきではありません。
<center>text</center>
テキストを左右にセンタリングするには スタイルシート の text-align を用います。
<div style="text-align:center; height:6rem; border:1px solid gray;"> text </div>
縦方向のアライメントを制御する vertical-align がありますが、これは、基準となるテキストの位置に対して画像などの位置を決めるもので、テーブル以外で使用する場合は、親要素の中央ではなく、基準となるテキストの高さの中央に表示されてしまいます。
<div style="font-size:40pt; height:6rem; border:1px solid gray;"> <span>TEXT</span> <img style="vertical-align:middle" src="../image/popase.gif" alt="Sample image"> <span style="vertical-align:middle; font-size:10pt">text</span> <span>TEXT</span> </div>
text
TEXT
vertical-align は、テーブル要素の <th>, <td> で使用した場合は、親要素である th や td の縦方向の中央に表示します。ただし、テーブルをレイアウトの目的で使用することは推奨されていません。
<table style="width:100%; height:6rem; border:1px solid gray;">
<tr>
<td style="vertical-align:middle;">text</td>
</tr>
</table>
| text |
親要素を display で table-cell にしてやれば、th, td と同様、親要素の縦方向の中央に表示することができます。table-cell はさらに親要素を display:table にしてやらないと width を指定することができないこと、display:table-cell の要素には min-height や min-with を指定できない点に注意してください。
<div style="display:table; width:100%; height:6rem;">
<div style="display:table-cell; vertical-align:middle; border:1px solid gray;">
text
</div>
</div>
親要素の line-height を親要素の高さにそろえることで、センタリングする方法もよく用いられます。ただし、テキストが1行のみの場合に限られます。
<div style="vertical-align:middle; line-height:6rem; height:6rem; border:1px solid gray;"> text </div>
親要素を グリッドコンテナ にして align-content で上下中央に表示します。align-content の代わりに justify-content にすれば左右中央に、place-content にすれば上下左右中央に表示されます。
<div style="display:grid; align-content:center; height:6rem; border:1px solid gray;"> text1<br>text2 </div>
text-align はテキストに対して用いるものなので、ブロック要素に対して指定しても無視されます。
<div style="text-align:center; height:6rem; border:1px solid gray;"> <div style="width:5rem; height:3rem; background:#f99;">text</div> </div>
子要素を inline-block にしてやることで text-align が効くようにすることもできます。ただし、子要素の中身まで text-aligh が効いてしまうので注意してください。
<div style="text-align:center; height:6rem; border:1px solid gray;"> <div style="display:inline-block; width:5rem; height:3rem; background:#f99;">text</div> </div>
ブロック要素を左右にセンタリングするには、子要素の margin-right と margin-left に auto を指定します。左右のマージンを自動にすることで、右マージンと左マージンが自動調整され、中央表示となります。センタリングがブロック要素の中身まで影響を及ぼすことはありません。
<div style="height:6rem; border:1px solid gray;"> <div style="margin-right:auto; margin-left:auto; ; width:5rem; height:3rem; background:#f99;">text</div> </div>
近年では flex と justify-content を用いるのが一般的になってきています。[対応ブラウザ]
<div style="display:flex; justify-content:center; height:6rem; border:1px solid gray;"> <div style="width:5rem; height:3rem; background:#f99;">text</div> </div>
テキストと同様、<td> や display:table-cell と vertical-align を組み合わせて上下にセンタリングする方法です。display:table を使用しないと width を設定できないこと、display:table-cell には min-height, min-width を指定できないことに注意してください。
<div style="display:table; width:100%;">
<div style="display:table-cell; vertical-align:middle; height:6rem; border:1px solid gray;">
<div style="width:5rem; height:3rem; background:#f99;">text</div>
</div>
</div>
左右の場合に margin:auto を指定したのと同様、上下も margin-top と margin-bottom に auto を指定する方法です。ただし、上下の場合は親要素を relative、子要素を abosolute とし、top:0, bottom:0 を指定する必要があります。
<div style="position:relative; height:6rem; border:1px solid gray;">
<div style="position:absolute; top:0; bottom:0; margin-top:auto; margin-bottom:auto;
width:5rem; height:3rem; background:#f99;">text</div>
</div>
上下の場合も現在では flex と align-items を用いるのがおすすめです。
<div style="display:flex; align-items:center; height:6rem; border:1px solid gray;"> <div style="width:5rem; height:3rem; background:#f99;">text</div> </pre>
下記のHTMLをターゲットにセンタリングします。
<div class="container">
<div class="parent">
<div class="child">
いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん
</div>
</div>
</div>
あらかじめ、下記の CSS が設定されているとします。
.parent {
border: 1px solid #888;
width: 100%;
height: 6rem;
}
.child {
background: #ddd;
width: 50%;
}
インラインブロックに対しては text-align で左右中央を指定できるので、子要素を inline-block とし、親要素に text-align:center を指定します。テーブルセルに対しては vertical-align で上下中央を指定できるので、親要素を table-cell とし、vertical-align:middle を指定します。display:table-cell は 親要素に display:table を指定しないと width をうまく設定できないので、さらなる親要素に display:table を指定します。子要素の中身に対してもセンタリングが適用されてしまう点と、table-cell に対しては min-height や min-width を適用できない点に注意してください。
.container {
display: table;
width: 100%;
}
.parent {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child {
display: inline-block;
}
左右のセンタリングであれば margin-right:auto と margin-left:auto を指定すればよいのですが、上下左右をセンタリングする場合は、親要素を relative、子要素を absolute にし、top, left, bottom, right に 0 を指定し、高さを指定した上で margin を auto にする必要があります。子要素の高さを固定で指定する必要があるのが欠点です。
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 4rem;
margin: auto;
}
親要素を relative、子要素を absolute にして、子要素の左上端を親要素の 50%, 50% の位置に表示し、さらに transform を用いて子要素の高さ・横幅の 50% だけマイナス方向に移動する方法です。次に紹介する flex による方法が普及するまでのテクニックとして利用されていました。子要素の高さを指定する必要がありません。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
現在では flex を用いるのが最もおススメです。親要素をフレックス、子要素をフレックスアイテムとし、子要素を justify-content で横方向に、align-items で縦方向にセンタリングします。
.parent {
display: flex;
justify-content: center;
align-items: center;
}