NEW ARTICLE
PyCharm 最近の変更を一覧表示するショートカットキー
  1. HOME
  2. CSS
  3. CSS3で要素の上下中央配置 - Part1

CSS3で要素の上下中央配置 – Part1

  • 作成日 2020.12.02
  • 更新日 2020.12.18
  • CSS
CSS3で要素の上下中央配置 – Part1

CSS3のpositionとtransformを使って、html要素を上下中央配置する簡単なサンプルコードを記述してます。

目次

環境

  • OS windows10 64bit
  • chrome 86.0.4240.198

上下中央配置

position と transform を使用することで、簡単に要素を上下中央に配置することが出来ます。

/*親要素*/

.center {
    width: 100%;
    height: 400px;
    position: relative;
}


/*上下中央に配置したい要素*/

.center .inner {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    /*iOSとSafari用*/
    transform: translate(-50%, -50%);
}

サンプルコード

以下は実際に、positionとtransform を使用したサンプルコードとなります。

<style>
    /*親要素*/
    
    .center {
        width: 100%;
        height: 300px;
        position: relative;
        background: #008000;
    }
    /*上下中央に配置したい要素*/
    
    .center .inner {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        /*iOSとSafari用*/
        transform: translate(-50%, -50%);
        color: #fff;
    }
</style>

<div class="center">
    <div class="inner">
        上下中央に配置されます。<br>
        配置する要素のサイズを指定する必要はありません。
    </div>
</div>

ブラウザ上で表示した結果

上下中央に配置されます。
配置する要素のサイズを指定する必要はありません。