【CSS】position:absoluteの上下左右中央配置マニュアル

2019年7月16日2019年9月30日

cssのposition:absoluteで、上下、左右、中央それぞれに配置するためのcssソースコードをまとめました。

それぞれ、親要素、子要素のサイズを問わず、可変でも対応するため、ご活用頂けると嬉しいです。

各項目毎に、そのcssを適用したデモも併せて載せてあります。

各デモの親要素、子要素のプロパティ、HTMLソースは下記のようになっています。

.parent{
    position: relative;
    width: 100%;
    height: 300px;
    border: 2px solid #CCC;
    box-sizing: border-box;
}
.parent > div{
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    background-color: red;
    /*
    デモ部分は、ここに位置プロパティを入れています
    position: absolute;
    top: 0;
    left: 0;
    */
}

<div class="parent">
    <div></div>
</div>

左上に配置する

.parent > div{
    position: absolute;
    top: 0;
    left: 0;
}

中央上に配置する

.parent > div{
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

右上に配置する

.parent > div{
    position: absolute;
    right: 0;
    top: 0;
}

左中央に配置する

.parent > div{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

上下左右中央に配置する

.parent > div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}

右中央に配置する

.parent > div{
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

左下に配置する

.parent > div{
    position: absolute;
    bottom: 0;
    left: 0;
}

中央下に配置する

.parent > div{
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

右下に配置する

.parent > div{
    position: absolute;
    right: 0;
    bottom: 0;
}

以上、position:absoluteの上下左右中央配置マニュアル、でした。

CSS