CSSで水平方向中央揃え、垂直方向中央揃え、上下左右中央揃えにする方法をまとめました。
実務でよく使用する・よく見かける方法を中心にまとめています。
CSSで水平方向中央寄せにする方法
text-alignで水平方向中央揃え
親となるブロック要素にtext-align: center;
を指定することで、子のインライン要素を水平方向中央寄せにすることができます。
また、ブロック要素に記載されているテキストを水平方向中央寄せにすることもできます。
【サンプル】text-alignでテキストを水平方向中央揃え
テキスト
<p class="box1">テキスト</p>
.box1 {
text-align: center;
height: 200px;
padding: 1em;
border: solid 1px #f09896;
}
【サンプル】text-alignで画像を水平方向中央揃え
![サンプル](https://webdesign-programming.com/img/css-center-sample.png)
<div class="box1">
<img src="image URL" alt="サンプル">
</div>
.box1 {
text-align: center;
height: 200px;
padding: 1em;
border: solid 1px #f09896;
}
margin: 0 autoで水平方向中央揃え
子のブロック要素にmargin: 0 auto;
を指定することで、親となるブロック要素の幅を基準として、水平方向中央寄せにすることができます。
text-align: center;
はインライン要素を中央寄せできるのに対し、margin: 0 auto;
はブロック要素を中央に配置できます。
【サンプル】margin: 0 autoで1つのブロック要素を水平方向中央揃え
<div class="box2">
<div class="box2_circle"></div>
</div>
.box2 {
height: 200px;
padding: 1em;
border: solid 1px #f09896;
}
.box2_circle {
margin: 0 auto;
width: 80px;
height: 80px;
background: #f09896;
border-radius: 100%;
}
margin: 0 autoで複数の要素を水平方向中央揃え
【サンプル】margin: 0 autoで2つのブロック要素を水平方向中央揃え
<div class="box2">
<div class="box2_circle"></div>
<div class="box2_circle"></div>
</div>
.box2 {
height: 200px;
padding: 1em;
border: solid 1px #f09896;
}
.box2_circle {
margin: 0 auto;
width: 80px;
height: 80px;
background: #f09896;
border-radius: 100%;
}
display: flexで水平方向中央寄せ
親となる要素にdisplay: flex;
とjustify-content: center;
を指定することで、子要素を中央寄せにすることができます。
margin: 0 auto;
で複数の要素を中央寄せにした場合、縦並びになります。
複数の要素を横並びで中央寄せにしたい場合、display: flex;
を使用します。
【サンプル】display: flexで1つの要素を水平方向中央寄せ
<div class="box3">
<div class="box3_circle"></div>
</div>
.box3 {
display: flex;
justify-content: center;
height: 200px;
padding: 1em;
border: solid 1px #f09896;
}
.box3_circle {
width: 80px;
height: 80px;
background: #f09896;
border-radius: 100%;
}
display: flexで複数の要素を水平方向中央寄せ
【サンプル】display: flexで2つの要素を水平方向中央寄せ
<div class="box3">
<div class="box3_circle"></div>
<div class="box3_circle"></div>
</div>
.box3 {
display: flex;
justify-content: center;
height: 200px;
padding: 1em;
border: solid 1px #f09896;
}
.box3_circle {
width: 80px;
height: 80px;
background: #f09896;
border-radius: 100%;
}
positionで水平方向中央寄せ
親となる要素にposition: relative;
を指定し、子要素にposition: absolute;
、left: 50%;
、transform: translateX(-50%);
を指定することで、子要素を水平方向の中央に配置することができます。
【サンプル】positionで1つの要素を水平方向中央寄せ
<div class="box4">
<div class="box4_circle"></div>
</div>
.box4 {
position: relative;
height: 200px;
padding: 1em;
border: solid 1px #f09896;
}
.box4_circle {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 80px;
background: #f09896;
border-radius: 100%;
}
positionで複数の要素を水平方向中央寄せ
- positionで複数の要素を水平方向に中央寄せした場合、要素同士が重なります。
【サンプル】positionで2つの要素を水平方向中央寄せ
<div class="box4">
<div class="box4_circle"></div>
<div class="box4_circle"></div>
</div>
.box4 {
position: relative;
height: 200px;
padding: 1em;
border: solid 1px #f09896;
}
.box4_circle {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 80px;
background: #f09896;
border-radius: 100%;
}
.box4_circle:nth-child(2) {
width: 50px;
height: 50px;
background: #fff;
}
CSSで垂直方向中央寄せにする方法
flexで垂直方向中央揃え
親となる要素にdisplay: flex;
とalign-items: center;
を指定することで、子要素を垂直方向中央揃えにできます。
【サンプル】flexで1つの要素を垂直方向中央揃え
<div class="box5">
<div class="box5_circle"></div>
</div>
.box5 {
display: flex;
align-items: center;
height: 200px;
padding: 1em;
border: solid 1px #f09896;
}
.box5_circle {
width: 80px;
height: 80px;
background: #f09896;
border-radius: 100%;
}
flexで複数の要素を垂直方向中央揃え
【サンプル】flexで2つの要素を垂直方向中央揃え
<div class="box5">
<div class="box5_circle"></div>
<div class="box5_circle"></div>
</div>
.box5 {
display: flex;
align-items: center;
height: 200px;
padding: 1em;
border: solid 1px #f09896;
}
.box5_circle {
width: 80px;
height: 80px;
background: #f09896;
border-radius: 100%;
}
.box5_circle:nth-child(2) {
width: 50px;
height: 50px;
}
flexで複数の要素を縦並び垂直方向中央寄せ
親となる要素にdisplay: flex;
とjustify-content: center;
、flex-direction: column;
を指定することで、子要素を垂直方向中央寄せにできます。
【サンプル】flexで2つの要素を縦並び垂直方向中央寄せ
<div class="box6">
<div class="box6_circle"></div>
<div class="box6_circle"></div>
</div>
.box6 {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
padding: 1em;
border: solid 1px #f09896;
}
.box6_circle {
width: 80px;
height: 80px;
background: #f09896;
border-radius: 100%;
}
positionで垂直方向中央寄せ
親となる要素にposition: relative;
を指定し、子要素にposition: absolute;
、top: 50%;
、transform: translateY(-50%);
を指定することで、子要素を垂直方向の中央に配置することができます。
【サンプル】positionで1つの要素を垂直方向中央寄せ
<div class="box7">
<div class="box7_circle"></div>
</div>
.box7 {
position: relative;
height: 200px;
padding: 1em;
border: solid 1px #f09896;
}
.box7_circle {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 80px;
height: 80px;
background: #f09896;
border-radius: 100%;
}
positionで複数の要素を垂直方向中央寄せ
- positionで複数の要素を垂直方向に中央寄せした場合、要素同士が重なります。
【サンプル】positionで2つの要素を垂直方向中央寄せ
<div class="box7">
<div class="box7_circle"></div>
<div class="box7_circle"></div>
</div>
.box7 {
position: relative;
height: 200px;
padding: 1em;
border: solid 1px #f09896;
}
.box7_circle {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 80px;
height: 80px;
background: #f09896;
border-radius: 100%;
}
.box7_circle:nth-child(2) {
width: 50px;
height: 50px;
background: #fff;
}
CSSで上下左右中央揃えにする方法
flexで上下左右中央揃え
親となる要素にdisplay: flex;
とjustify-content: center;
、align-items: center;
を指定することで、子要素を垂直方向中央揃えにできます。
【サンプル】flexで1つの要素を上下左右中央揃え
<div class="box8">
<div class="box8_circle"></div>
</div>
.box8 {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
padding: 1em;
border: solid 1px #f09896;
}
.box8_circle {
width: 80px;
height: 80px;
background: #f09896;
border-radius: 100%;
}
flexで複数の要素を上下左右中央揃え
【サンプル】flexで2つの要素を上下左右中央揃え
<div class="box8">
<div class="box8_circle"></div>
<div class="box8_circle"></div>
</div>
.box8 {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
padding: 1em;
border: solid 1px #f09896;
}
.box8_circle {
width: 80px;
height: 80px;
background: #f09896;
border-radius: 100%;
}
.box8_circle:nth-child(2) {
width: 50px;
height: 50px;
}
flexで複数の要素を縦並び上下左右中央揃え
親となる要素にdisplay: flex;
とjustify-content: center;
、align-items: center;
、flex-direction: column;
を指定することで、子要素を上下左右中央寄せにできます。
【サンプル】flexで2つの要素を縦並び上下左右中央揃え
<div class="box9">
<div class="box9_circle"></div>
<div class="box9_circle"></div>
</div>
.box9 {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 400px;
padding: 1em;
border: solid 1px #f09896;
}
.box9_circle {
width: 80px;
height: 80px;
background: #f09896;
border-radius: 100%;
}
.box9_circle:nth-child(2) {
width: 50px;
height: 50px;
}
positionで上下左右中央寄せ
親となる要素にposition: relative;
を指定し、子要素にposition: absolute;
、top: 50%;
、left: 50%;
、transform: translate(-50%, -50%);
を指定することで、子要素を上下左右の中央に配置することができます。
【サンプル】positionで1つの要素を上下左右中央寄せ
<div class="box10">
<div class="box10_circle"></div>
</div>
.box10 {
position: relative;
height: 200px;
padding: 1em;
border: solid 1px #f09896;
}
.box10_circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: #f09896;
border-radius: 100%;
}
positionで複数の要素を上下左右中央寄せ
- positionで複数の要素を上下左右中央寄せした場合、要素同士が重なります。
【サンプル】positionで2つの要素を上下左右中央寄せ
<div class="box10">
<div class="box10_circle"></div>
<div class="box10_circle"></div>
</div>
.box10 {
position: relative;
height: 200px;
padding: 1em;
border: solid 1px #f09896;
}
.box10_circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: #f09896;
border-radius: 100%;
}
.box10_circle:nth-child(2) {
width: 50px;
height: 50px;
background: #fff;
}
HTML・CSS入門におすすめの1冊
もみじ
Web製作未経験でも読みやすい構成で、初学者でも安心して学習することができます。
実践的な内容を学ぶことができ解説も丁寧で分かりやすく、基礎的な内容はこの1冊で学ぶことができます。