- htmlにtextalign=”center”と記述。
文章だけでなく、画像も中央配置が可能。
ただ、本来は文章の中央配置のためのもの - cssにdisplay: flex;
justify-content: center;
と記述。
ただし、iPhoneで画像が縦長になってしまう場合がある。 - margin:0 auto; display:block;(もしくは、margin-left:auto; margin-right:auto; display:block;)
天地のマージンを指定したくない場合にはかっこ内の方法を使用。
画像やテキスト等、ブロック要素ではないものにはdisplay:blockで指定しないとならないので、他でdisplayを使っているならこの方法は使えない。
またwidthでサイズ指定しても適用される(width:autoはダメ)
3つ目の方法についての補足。なんで、うまくいかないのか・・・
例えばサイトの横幅を1000pxとした場合、ブロック要素でない、pタグなどを配置する場合、横幅が100%(1000px)になってしまい、その中での左配置になってしまうので、中央配置は利いてないように見える。
これを中央配置にしたい要素の横幅を例えば500pxとすると、1000pxの中の500pxを中央配置となりうまくいくみたいです。
文字みたいに横幅を指定しづらい場合にはdisplay:blockかdisplay:inline-blockにすると「今の文字サイズが横幅なんだ」と認識して中央にいってくれるみたいです。
…ただ、inline-blockは予期せぬ挙動する事あるので、個人的にはあまり使いたくないのですが。
なので、3つの中で一番良いものを選ぶと良いと思います。display:flexも自分がよく分かっていないだけで、ちゃんとした制御方法があると思います。