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

    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;
}