≪ Today I learned. RSS購読
公開日
タグ
CSS
著者
ダーシノ(@bc_rikko)

CSS Logical Propertiesで中央揃え

margin-top/margin-leftはPhysical Properties（物理プロパティ）と呼ばれ、物理的に上、右のような場所に対応している。

対して、margin-block/margin-inlineはLogical Properties（論理プロパティ）と呼ばれ、ブロックの先頭、インラインの末尾のような意味的な場所に対応している。 そのため、writing-modeがvertical-lrでもvertical-rlでも使える。

                         margin-top
                    +------------------+
        margin-left |                  | margin-right
                    +------------------+
                        margin-bottom
                            ↓↓↓
                     margin-block-start
                    +------------------+
margin-inline-start |                  | margin-inline-end
                    +------------------+
                      margin-block-end

といっても複数のwriting-modeなんてなかなかサポートしないので別の使い方を考える。

/* Before */
article {
  margin: 0 auto;
}

/* pafter */
article {
  margin-inline: auto;
}