変換でのセンタリングが平行移動し、50%を完全に(位置の相対的な親を使用して)残し、右50%ではないのはなぜですか?
作業例:
span[class^="icon"] {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
中央にない例:
span[class^="icon"] {
position: absolute;
top: 50%;
right: 50%;
transform: translate(-50%, -50%);
}
translateX(-50%)
は何かをleft 50%(_-
_負の値)に戻すため、_left: 50%;
_とペアになって何かを中央に配置するためです。
_right: 50%;
_を使用する場合は、translateX(50%)
とともに使用して中央揃えにします。
_* {margin:0;}
span {
position: absolute;
top: 50%; right: 50%;
transform: translate(50%,-50%);
background: black;
color: white;
}
body:after, body:before {
content: '';
position: absolute;
background: red;
}
body:after {
top: 50%;
left: 0; right: 0;
height: 1px;
}
body:before {
left: 50%;
top: 0; bottom: 0;
width: 1px;
}
_
_<span>center me</span>
_