CSSで、中央寄せにする方法

HTMLCSS初心者で躓きがちな問題として、「テキストや画像を中央寄せする方法がわからない」が1つあげられると思います。今回は、その方法を簡単にまとめてみました。

1. text-align: center;

sumple
HTML

<div class="container">
	<h1>HELLO!</h1>
	<p>texttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>

CSS

.container{
  width: 1000px;
  height: 500px;
  background-color: #f4f4f4;
}

.container h1{
  text-align: center;
}

.container p{
  text-align: center;
}

text-align プロパティに、centerを指定すると、文字や画像を中央に寄せることができます。
rightやleftを指定すると、それぞれ右寄せ、左寄せにすることも可能です。
　注意しなければならない点は、ブロック要素にしか指定できないことです。inline要素や、inline-block要素の場合、display:block　でblock要素に変更して使用しましょう。
　または、親要素にtext-align:center;を指定しましょう。結構この辺で躓いた経験があります^^；

2. margin: 0-auto;

sumple
HTML

<div class="container">
	<h1>HELLO!</h1>
	<p>texttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>

CSS

.container{
  margin: 0 auto;
  width: 1000px;
  height: 500px;
  background-color: #f4f4f4;
 
}

.container h1{
  margin: 0 auto;
  width: 150px;
}

.container p{


}

次の方法は、中央寄せしたいblock要素にmargin:0 auto;を指定する方法です。
上下のmarginを0px、左右のmarginをautoにすることによって中央寄せすることができます。
widthの指定が必要になります。

3. display: flex;

HTML

<div class="container">
	<h1>HELLO!</h1>
</div>

CSS

.container{
  margin: 0 auto;
  width: 1000px;
  height: 500px;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
 
}

ul li　要素の横並びによく使うdiplay: flex; ですが、 justify-content: center;を使用し、
中央寄せにすることもできます。

4. display: glid;

HTML

<div class="container">
	<h1>HELLO!</h1>
</div>

CSS

.container{
  margin: 0 auto;
  width: 1000px;
  height: 500px;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
}


.container h1{
  display: grid;
  place-items: center;
  }

dislay: glid;と、 place-items: center;を使用しても、中央寄せにすることができます。