TOP > ウェブデザイン > コーディング > 「position: absolute;」を使わずに縦横中央に配置する方法

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

2021/1/28

2023/8/18

2409 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-align: center;
    height: 100px;
    background: #f88;
}
.target {
    width: 20%;
    margin: 0 auto;
    background: #7e7;
    display: block;
    text-align: center;
}