【CSS】配置要素を中央に表示

1. マージンを使用します

分析

:

親要素の垂直方向と水平方向の左上を中央に配置します

• margin-top : -50px; margin-left: -50px; 要素をその距離の半分だけ上と右にオフセットします

• p {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -50px;}

:

top: 50%; left: 50%; 要素の左上を親要素の垂直方向と水平方向の中央に配置します

transform: translation(-50%, -50%);上と右への距離の半分

3、4 つの方向すべてが 0、位置にマージンを使用します

• p {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);}

• 分析
:

4 つの方向すべてが 0 の場合、相互に打ち消し合い、ボックスは初期位置に表示されます

margin : auto; ボックスを縦横中央に配置します

その他の[CSS]配置要素を中央に配置して表示するには、注意してください関連記事については、PHP 中国語 Web サイトにアクセスしてください。