要素を中央寄せする際に、左右の中央寄せは比較的簡単にできるけど、上下の中央寄せに苦労することがよくあります。
今回はCSSで上下左右に中央寄せする3つの方法について紹介します。
display:tableで中央寄せ
<div class="container">
<h1>CSSで<br>上下左右中央に<br>文字を配置する</h1>
</div>.container {
display: table;
width: 600px;height: 338px;
}
h1 {
display: table-cell;
vertical-align: middle;
background: background-color: #eec0c6;
background-image: linear-gradient(
315deg,
#eec0c6 0%,
#7ee8fa 74%
);
color: white;
font-weight: bold;
font-size: 26px;
text-shadow: 0 0 20px #999;
line-height: 1.5;
}「container」クラスに「display:table」、「h1」要素に「display:table-cell」を指定しテーブルセル化。「vertical-align: middle;」で上下中央寄せ、「text-align」で左右中央寄せに。
このWEBパーツを確認する
HTML・CSSのカスタマイズや動作確認ができます
display:gridで中央寄せ
.container{
display: grid;
place-items: center;
width: 600px;height: 338px;
}
h1 {
padding: 1rem 2rem;
border: 2px solid;
color: #333;
font-weight: bold;
font-size: 26px;
text-align: center;
line-height: 1.5;
}「display: grid;」「place-items: center; 」の２行で「h1」要素を上下左右中央に。「h1」要素の「text-align:center;」で文字を中央寄せにしています。
このWEBパーツを確認する
HTML・CSSのカスタマイズや動作確認ができます
display:flexで中央寄せ
.container {
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 338px;
}
h1 {
padding: 1rem 2rem;
box-shadow: 0 0 10px 5px;
color: white;
font-weight: bold;
font-size: 26px;
text-shadow: 0 0 10px #222;
text-align: center;
line-height: 1.5;
}「display: flex;」を指定し、「h1」要素を「justify-content: center;」水平、「align-items: center;」で垂直方向に中央寄せ。「text-align:center;」で文字を中央寄せにしています。
このWEBパーツを確認する
HTML・CSSのカスタマイズや動作確認ができます
