CSSで文字をど真ん中にしたい！

日々のエラーやできなかった事、解決方法をシェアしていきます。

cssで文字をど真ん中にする方法。

html

 <div>
   <p>ど真ん中</p>
 </div>

css

div {
 width: 500px;
 height: 500px;
 background-color: pink;
 display: flex;
 justify-content: center;
 align-items: center;
}

p {
 font-size: 24px;
}

要素を横並びにしたり、並べ替えたりできる、display: flex;ですが、文字をど真ん中にしたい時にも使えます。

必ず親要素に
display: flex;　
justify-content: center;
align-items: center;　を指定します。

なんとなく文字を真ん中にしたいなら、pに指定したくなりますが、そうするとど真ん中に配置されません。私は最初pにして、できないなぁとなりました。

display: flex;以外にも、positionを使ってど真ん中にすることもできます。
その場合は、下記のようになります。

css

div {
 width: 500px;
 height: 500px;
 background-color: pink;
 position: relative;
}

p {
 font-size: 24px;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}