CSSで中央寄せにする方法まとめ

CSSで中央寄せにする方法(inlineとblockで方法をかえよう！)

おはこんばんちわ、やのっぱです(´・ω・｀)

そういえば、周りでcssによる中央寄せがうまくいかないって声をよく聞いてたのでいくつか書いてみたよ。

思いつく限りの中央寄せの方法を書きます。

注意！ 本記事はreset.css、clearfixを導入した状態を基準としてソースコードを載せています。

１．margin: 0 auto;【block要素を中央に】

定番の中央寄せです。
でも、要素がwidth:100%;だと無理です。
margin取れないからです。

例）

  <style>
.marginTest {
  width:100%;
  height:40px;
  background:rgba(235,235,235,1.00);
}
.margin0Auto {
  width:300px;
  height:40px;
  margin:0 auto;
  background:rgba(185,244,186,1.00);
}
</style>
  <div class="marginTest">
    <div class="margin0Auto"></div>
  </div>
  

２. text-align: center;【inline要素を中央に】

テキストとかだけでしょ！って思われがちだけど、結構使えます。
テキストなどのinline要素が中央に寄ります。
つまり、中の要素をdisplay: inline;またはdisplay: inline-block;にしちゃえば中央に行きます。

例）

  <style>
.text_align {
  width:100%;
  background:rgba(235,235,235,1.00);
}
.text_align01 {
  text-align:center;
}
.text_align02 {
  text-align:center;
}
.text_align02_in {
  display:inline-block;
  width:200px;
  height:20px;
  background:rgba(119,121,229,1.00);
}
</style>
  <div class="text_align">
    <p class="text_align01">テキスト中央にいっちゃうよ！</p>
    <div class="text_align02">
      <div class="text_align02_in"></div>
    </div>
  </div>
  

ちなみにimgもtext-alignで中央に出来ます。

３．positionで中央寄せ【ウィンドウの左に要素がぶつかっても大丈夫な中央寄せ】

positionでも中央寄せ出来ます。
メイン画像が主要コンテンツの幅より大きい場合など使うと有効です。
ウィンドウの左で止まらずにウィンドウ幅に関係なく常に画像の中央が、ウィンドウの中央に固定されます。
レイアウト崩れ防止のためにつかいますね。

<style>
.posiCenter {
  position:relative;
  width:100%;
  height:300px;
  margin:0 auto;
  background:rgba(235,235,235,1.00);
  overflow:hidden;
}
.posiCenterIn {
  position:absolute;
  left:50%;
  top:0;
  width:700px;
  height:300px;
  margin-left:-350px;/*widthの半分を-で*/
  background:rgba(229,214,78,1.00);
  text-align:center;
}
</style>
  <div class="posiCenter">
    <div class="posiCenterIn">test</div>
  </div>
  

同じことはbackgroundでも出来ます。

  .XXX {
  background: url(イメージsrc) center top no-repeat;
  }
  

しかし、テキスト情報のある画像の場合alt属性を入れるほうがよいので、imgタグにpositionを与えて実現させるほうが良い場合が多々あります。

４.ちょっとレスポンシブな中央寄せ

基本margin: 0 auto;を使用する場合、widthが決まっているのが大前提です。
そうなると、レスポンシブな時どうするの？
という声もありそうなので、一例を。。。

  <style>
.respon {
  width:100%;
  background:rgba(235,235,235,1.00);
}
.responList {
  padding:0 10%;
}
.responList li {
  float:left;
  width:23%;
  height:40px;
  margin:0 1%;
  list-style:none;
}
</style>
  <div class="respon">
    <ul class="responList clearfix">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  

すべてを％で設定すると可変になります。
その上で親要素をpaddingで狭めていくと、どんどん真ん中に向かって縮まっていきます。
または、

  .responList {
  width:80%;
  margin:0 auto;
  }
  

にしてあげると、中央に寄ります。

ほんの一例ですので、応用しだいでどんな中央寄せも可能です。

最後に！ここだけ気をつければよい点

要は中央に寄せたい要素がinlineかblockか！ それがわかれば、marginじゃダメとかtext-alignが効かないなどの原因が見えてきます。
（inlineだとtext-alignが効きます。blockだとwidthを決めて、margin:0 auto;です。）

もっと出るかと思ったけど、基本の考え方が同じものが多いのでこんだけになりました。
それでは、よいコーディングライフを～(・ω<)ﾉｼ

＜追記：2018.8.22＞
新たに内容を追加しているので、こちらも合わせてご覧ください♪
CSSで中央寄せにする方法まとめ（Flexbox、transform編）