3月更新・前月(2月)の人気記事トップ10 03/01/2023
- ( 01 – ) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
- ( 02 – ) 【Mac】MacにGoogle Driveをインストール
- ( 03 – ) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- ( 06 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 05 – ) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 05 ↓) 【Mac】Macのユーザー名とアカウント名を変更する
- ( 07 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- ( 08 – ) 【iPhone iPad】iPhoneやiPadの音量を細かく調整する方法
- (圏外↑) 【Labs】マウスオーバーでボタンの色が変わるロールオーバー
- ( 09 ↓) 【jQuery】入門5. jQueryで日時を表示
【Labs】要素のいろいろな画面中央配置の仕方
こんにちは(・∀・)
CSSを使用して要素を画面の「左右」中央、または画面の「上下左右」中央に配置するいくつかのサンプルをご紹介したいと思います。
CSS3を使用してコーディングすることができるようになってきた昨今、その設定方法も増えましたので改めてご紹介していきます。
センタリング・画面「左右」中央配置
いろいろなやり方で子要素を画面「左右」中央に配置します。親要素の横幅はどれも100%です。
1. text-align属性
text-align属性・値centerを使用して子要素を画面「左右」中央に配置します。
HTML
<div class="oya-youso">
<p class="ko-youso">サンプル</p>
</div>
CSS
.oya-youso {
text-align: center;
}
.ko-youso {
background: #9fb7d4;
}
2. margin属性
margin属性・値autoを使用して子要素を画面「左右」中央に配置します。
HTML
<div class="oya-youso">
<p class="ko-youso">サンプル</p>
</div>
CSS
.ko-youso {
background: #9fb7d4;
width: 600px;
height: 200px;
margin: 0 auto;
}
3. position属性・margin属性
position属性・margin属性を使用して子要素を画面「左右」中央に配置します。
HTML
<div class="oya-youso">
<p class="ko-youso">サンプル</p>
</div>
CSS
.ko-youso {
background: #9fb7d4;
position: relative;
left: 50%;
width: 600px;
height: 200px;
margin-left: -300px;
}
センタリング・画面「上下左右」中央配置
今度はいろいろなやり方で子要素を画面の「上下左右」中央に配置します。親要素の横幅はどれも100%です。これらサンプルは親要素の高さが必要になる場合があります。サンプル5、6は親要素に高さを指定しないと縦方向のセンタリングは効きませんので、親要素に高さ100vhを設定します。
4. position属性・margin属性
position属性・margin属性を使用して子要素を画面の「上下左右」中央に配置します。
HTML
<div class="oya-youso">
<p class="ko-youso">サンプル</p>
</div>
CSS
.ko-youso {
background: #9fb7d4;
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 200px;
text-align: left;
margin-top: -100px;
margin-left: -300px;
}
5. display属性・justify-content属性・align-items属性
display属性・justify-content属性・align-items属性を使用して子要素を画面の「上下左右」中央に配置します。
HTML
<div class="oya-youso">
<p class="ko-youso">サンプル</p>
</div>
CSS
.oya-youso {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.ko-youso {
background: #9fb7d4;
}
6. position属性・transform属性
position属性・transform属性を使用して子要素を画面の「上下左右」中央に配置します。
HTML
<div class="oya-youso">
<p class="ko-youso">サンプル</p>
</div>
CSS
.oya-youso {
height: 100vh;
text-align: center;
}
.ko-youso {
background: #9fb7d4;
position: relative;
top: 50%;
transform: translateY(-50%);
}
7. position属性・transform属性
position属性・transform属性を使用して子要素を画面の「上下左右」中央に配置します。
HTML
<div class="oya-youso">
<p class="ko-youso">サンプル</p>
</div>
CSS
.ko-youso {
background: #9fb7d4;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
いかがでしたでしょうか、CSS3を使用することができるようになったので、特に画面「上下左右」の中央配置がとても楽になりました。使用用途に合わせて使い分けて見てください。
関連リンク
【CSS3リファレンス】margin
【CSS3リファレンス】position
【CSS3リファレンス】display
【CSS3リファレンス】transform