Webサイトを作っているときに文字や画像を垂直水平方向の中央に配置するのにつまづいてしまうことがあるので、まとめてみました。解決方法がすぐ見つかるように注意点とHTML・CSSソースを簡単に羅列してます。
私と同じようにつまづいてしまう方が解決方法を思い出すきっかけになれば幸いです。
目次
水平方向の中央に配置するためのＣＳＳプロパティ
text-align: center ;
margin: 0 auto ;
display: flex ;
justify-content: center ;
position: absolute ;
left: 50% ;
transform: translateX(-50%) ;
使い分け・注意点
text-alignはブロックレベル要素が内包するテキストや画像の配置に関する振る舞いを定めたプロパティなので、次のような場合に使用できます。
インライン要素への設定は無効です。ただし、display: blockを設定すると有効になります。
<div class="wrapper">
中央に表示する
</div>
<style>
.wrapper{
text-align:center;
}
</style>marginを使うにはwidthの指定が必須となります。このため、幅を持てないインライン要素では使用できません。（CSSでwidthを設定しても無効。） widthには、文字数が決まっている場合には：em、レスポンシブデザインの場合には：max-width、％を設定すると良い。（ blockの要素は初期値では横いっぱい（100%）に広がるようになっている）
<div class="content">
例文です
</div>
<style>
.content {
margin: 0 auto;
width: 4em;
}
</style>垂直方向の中央に配置するためのＣＳＳプロパティ
vertical-align: middle ;
position: absolute ;
top: 50vh ;
transform: translateY(-50%) ;
display:flex ;
align-items: center ;
margin-top: 50vh ;
使い分け・注意点
vertical-alignは、インライン要素またはテーブルセル要素の縦方向の整列方法を定義します。
ブロックレベル要素には設定できません。ブロックレベル要素に適用するにはdisplay:inline-block、display:table-cellを設定します。
<div class="wrapper">
<div class="contents">
縦方向中央に配置する
</div>
</div>
<style>
.wrapper{
height:300px;
display: table;
width: 100%;
}
.contents{
display: table-cell;
vertical-align: middle;
}
</style><p class="example">
これは例文です。
</p>
<style>
.example {
vertical-align:middle;
height: 100px;
line-height: 100px;
background: orange;
}
</style>positionはtopのみでは完全な中心にならないので、transformを使って微調整をしています。
%を使用することで、要素のサイズを知る必要がなく微調整ができるという利点があります。
<div class="wrapper">
<div class="contents">
水平方向の中央に配置する
</div>
</div>
<style>
.wrapper{
position: relative;
height: 100vh;
}
.contents{
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
</style>[合わせ技] 垂直水平方向の中央に配置するソース例
margin(50vh auto)を使う方法
<div class="contents">
水平垂直中央
</div>
<style>
.contents{
margin: 50vh auto 0;
transform: translateY(-50%);
padding: 15px 30px;
text-align: center;
width: 300px;
}
</style>display(flex)を使う方法
<div class="wrapper">
<div class="contents">
水平垂直方向に中心に配置する </div>
</div>
<style>
.wrapper{
display: flex;
justify-content: center;
align-items: center;
height:100vh;
}
</style>text-align(center),vertical-align(middle)を使う方法
<div class="wrapper">
<img class="target" src="file:abc.jpg">
</div>
<style>
.wrapper{
line-height: 100vh;
background-color: pink;
text-align: center;
}
.wrapper .target{
vertical-align: middle;
}
</style>完全な中心には配置できないことに注意が必要です。line-heighと vertical-align:middle の組み合わせでは、ベースラインの高さの分だけずれるため、厳密に正確な「中央寄せ」とはなりません。
position(absolute)を使う方法
<div class="wrapper">
<img class="target" src="file:abc.jpg">
</div>
<style>
.wrapper{
position: relative;
background: pink;
height: 100vh;
}
.wrapper .target{
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
}
</style>background-image(背景画像)を使う方法
<div class="container"></div>
<style>
.container{
display:block;
background-image: url(abc.png);
background-position: center;
background-repeat: no-repeat;
background-size:cover;
}
</style>background-sizeの設定値
- cover：要素に空白ができないように拡大します。はみ出した部分を切り落とします。
- contain：縦、横のいずれかで、要素の長さを満たすように拡大します。（要素をはみ出しません）