web-dev-qa-db-ja.com

変換によるCSSセンタリング

変換でのセンタリングが平行移動し、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%);
 }
csscentering
15
norkuy

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>_
19
Michael Coker