作業用メモ：div要素や画像を真ん中寄せにする3つのテクニックと使い分け

作業用メモ

要素を真ん中に寄せるには大きく分けて3つの方法があります。

text-align:center;で真ん中寄せ

<div id="box">
    <div></div>
</div>

#box{
    width:100%;
    text-align:center;
}
 
#box div{
    width:200px;
}

親要素にtext-align:center;をかけて中のdivを真ん中寄せすることができます。

親要素と子要素には幅を指定しなければなりません。

尚、spanやaなどのインライン要素を真ん中にする場合はブロック要素にしましょう。次のような場合です。

<div>
    <span></span>
</div>

div{
    width:100%;
    text-align:center;
}
span{
    display:block;
    width:200px;
}

div{
    width:500px;
    margin:0 auto 0 auto;
}

これは最も簡単でよく使うかもしれません。

左右のmarginをautoとしてやることで自身のサイズに合わせて自動的に良い所（真ん中）に配置してくれるという優れもの！

これならtext-alignと違ってdiv要素自体を真ん中に寄せることが出来ますね。

注意点としてはサイズが決まったブロック要素でないと真ん中には配置されません。

width（幅）を持たせている所がポイントです。自身のサイズに合わせて左右のバランスをとるわけですから自分のサイズが無ければ無理ですよね。

HTML

<img src="" class="sample_img">

.sample_img{
display: block;
margin: auto;
}

画像を真ん中にする場合はdisplay: block;でブロック要素にしてからmargin: auto;としてやる必要があります。

これは少し高度なCSSですが、習得してしまえばかなり便利です。

<div id="box">
    <div></div>
</div>

#box{
    position:relative;
}
#box div{
    width:100px;
    position:absolute;
    top:0px;
    left:50%;
    margin-left:-50px;
}

position:absolute;で真ん中寄せする場合は必ずleftから50%離してください。

そしてmargin-leftで真ん中にする要素のサイズの半分だけ-（マイナス）してください。

例） widthが300なら margin-leftは-150　！

いかがでしたか？

どうも真ん中寄せが上手くいかないなぁ…と言うときは下記の項目を疑ってみてください。

text-alignとmargin:auto;は良く使うテクニックですので必ず覚えておきましょう！

概念は使っているうちに覚えてくるはずです。