「position: absolute;」を使わずに縦横中央に配置する方法

2021/1/28

2021/10/5

504 views

中央配置

要素を縦横中央に配置したいケースでは、「position: absolute;」を使うと簡単です。

しかし、「position: absolute;」を使わずにコーディングしたい場合は、高さや幅の可変に合わせるのは少しテクニックがいります。

今回はその方法です。

「display: flex;」と「align-items: center;」を使う

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

この記事へのコメント

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

コメントを残す



関連記事

ページの先頭に戻る