NOTE

【CSS】レスポンシブ要素での縦横中央揃えの簡単な方法

2021/1/28

2021/2/28

178 view

  【CSS】レスポンシブ要素での縦横中央揃えの簡単な方法

要素を縦にも横にも配置したいケースがあると思います。
高さや横幅が常に一定であれば簡単ですが、リキッド・レスポンシブデザインなどで高さや幅が可変する場合は少し難しいですよね。
しかし、CSS3の「display: flex;」と「align-items: center;」プロパティを使えば簡単に実現できます。
以下そのコードの記述になります。

○HTML

<div class="cover">
<span class="target">縦横中央に配置したい要素</span>
</div>

○CSS

.cover {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    text-arign: center;
    height: 100px;
    background: #f88;
}
.target {
    width: 20%;
    margin: 0 auto;
    background: #7e7;
    display: block;
    text-align: center;
}

まとめ

以前は「line-height」を使うなどしていましたが、これなら高さが変わっても適用されるのでレスポンシブデザインには大助かりです。
しかし、古いブラウザなどでは適用されない場合もあるのでご注意ください。
ご質問などあればお気軽にコメントくださいね。

この記事へのコメント

  • まだ書き込みはありません

コメントを残す



関連記事

ページの先頭に戻る