webWebサイトを作っているときに文字や画像を垂直水平方向の中央に配置するのにつまづいてしまうことがあるので、まとめてみました。解決方法がすぐ見つかるように注意点とHTML・CSSソースを簡単に羅列してます。私と同じようにつまづいてしまう方が解決方法を思い出すきっかけになれば幸いです。;使い分け・注意点text-alignはブロックレベル要素が内包するテキストや画像の配置に関する振る舞いを定めたプロパティなので、次のような場合に使用できます。インライン要素への設定は無効です。blockを設定すると有効になります。.wrapper{text-align:center;}</style>marginを使うにはwidthの指定が必須となります。このため、幅を持てないインライン要素では使用できません。(CSSでwidthを設定しても無効。widthには、文字数が決まっている場合には:em、レスポンシブデザインの場合には:max-width、%を設定すると良い。;使い分け・注意点vertical-alignは、インライン要素またはテーブルセル要素の縦方向の整列方法を定義します。ブロックレベル要素には設定できません。ブロックレベル要素に適用するにはdisplay:inline-block、display:table-cellを設定します。class="example">これは例文です。orange;}</style>positionはtopのみでは完全な中心にならないので、transformを使って微調整をしています。%を使用することで、要素のサイズを知る必要がなく微調整ができるという利点があります。middle;}</style>完全な中心には配置できないことに注意が必要です。組み合わせでは、ベースラインの高さの分だけずれるため、厳密に正確な「中央寄せ」とはなりません。no-repeat;background-size:cover;}</style>background-sizeの設定値cover:要素に空白ができないように拡大します。はみ出した部分を切り落とします。contain:縦、横のいずれかで、要素の長さを満たすように拡大します。コメントをキャンセルメールアドレスが公開されることはありません。