CSSトップ、left、translateを使用して中央揃え

2937 ワード
CSS study テキストリンク

top,left値


位置をCSSのtop, left値に指定することができ、主にWeb開発、特にフロントエンドを開発している人にとって、top, leftはよく知られています.

位置が静的であれば?

top, leftの値を調整する必要があるセルのpositionの値がstaticである場合、topおよびleftは適用されません.
また、位置値が非静的値の場合はtopとleftが適用されますが、結果は絶対的、相対的な等値によって異なりますので、注意して使用してください.

translate


前回の投稿にはtranslate3d()と一般的なtranslate()の違いが書かれていました.そこにはtranslate()の原理について書かれていますが、今回の投稿でもこの概念を重視しています.

復習する

translate3d()はハードウェアアクセラレータを使用するので、より良いCSS性能を実現することができる.そのため、アップルのウェブサイトもtranslate()を使用しており、一般的なtranslate3d()ではありません.

上記高さ100pxのエリー小屋をtranslateY(100%)またはtranslate3d(0, 100%, 0)移動させる.

トップ、left、translateを使用して中央揃え


まず、100pxのELIMENTのposition: absolute値をそれぞれtop, leftとする.
.tempdiv {
  position: absolute;
  top: 50%;
  left: 50%;
}
結果は以下の通りです.

左上隅を基準にtop、left値を適用すると、左上隅が50%にあることがわかります.
ここでは50%が適用されます.
.tempdiv {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
結果は以下の通りです.

サマリ

translate()値の左上隅を中央にした後、top, leftで直線のtranslate()値のwidth, heightを直線に沿って横方向、縦方向にそれぞれ移動させることにより、中央に並べ替えることができる.
2021_04_07
[BOJ 3055]脱出(Java)