CSSのposition absoluteを指定した要素を中央寄せしたい時があります。
そういう時は、脳死で検索してCSSにコピペする人が多いと思います。
私もその一人です。
中央寄せする要素にanimationを適用した時に、挙動がおかしくなりました。
positon absoluteを中央寄せしてanimationしたらおかしくなる記述
transformで位置を変えているので、変える前と後でanimationが効いてしまう。
上下左右中央に寄せる場合
.box p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}上下を中央に寄せる場合
.box p{
position: absolute;
top: 50%;
left: 0%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}左右を中央に寄せる場合
.box p{
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
【css】要素をposition:absoluteで中央に配置する最新の方法(上下左右、上下、左右)
positionを使って要素を配置する際、その要素を中央に配置したいといったことはよくあると思います。その場合どうすしたらいいのか悩まれた経験はありませんか？今回は、positionで、要素の幅が確定していなくても上下中央、左右中央、上下左
arts-factory.net
transformを使わずpositon absoluteを中央寄せする記述
transformを使ってないので、animationは効かない。
左右中央寄せにする方法
.box{
position: absolute;
left: 0;
right: 0;
margin: auto;
}上下左右中央寄せにする方法
.box{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
translateを使わずにpositionで要素を中央寄せにする方法
上下中央寄せはpositionのtop,bottom,left,rightの値を0にしてmargin: auto;を指定してあげればOKです。mix-blend-modeを使った要素にtransform: none;以外を指定するとスタック...
kakechimaru.com
まとめ
transoformを使うとanimationとの組み合わせで弊害がでます。
transformを使わないでもposition absoluteは中央寄せ出来ることが分かったので今後はtransformを使わないようにしたいと思います。
