CSSのtransform: translate(-50%,-50%);を行う意味

CSSで真ん中に配置する際に、positionを使った際のtransform: translate(-50%,-50%);の定義の意味について教えてください。

例えば以下の定義があった場合なのですが…。
■HTML
<div id="parent">
<div class="child"></div>
</div>

■CSS
#parent {
width: 500px;
height: 500px;
background: tomato;
position: relative;
}

#hoge .child {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: blue;
}

親の中の真ん中を定義する記述で、
top: 50%;
left: 50%;
を行いますが、この時点では子要素分がずれてしまって、真ん中では無いですよね？
この挙動の意味が良くわかりません、縦横50％で指定しているので、真ん中に来てくれてもよさそうなのに子要素の要素分がずれてしまいますよね？

そのためだと思うのですが、 transform: translate(-50%, -50%);の記述を行うのですが、この記述の意味としては、自分自身、子要素のサイズの半分を縦横50％マイナスに移動させるという定義内容の理解でよいのでしょうか？

何だか、 transform: translate(-50%, -50%);の記述を行うのにとても違和感があるのですが、positionで定義する場合には、こうのようなものだと割り切って理解したらよいでしょうか？

普段はflexで対応しますが、まれにpositionの指定が必要になるのですが、毎回気になってしまいまして…。

transform: translate(-50%, -50%);の意味について私の理解でよいか教えてください。
また、
top: 50%;
left: 50%;
だけでは真ん中に来ない挙動についてご説明頂けますと助かります。
宜しくお願いいたします。

No.2 ベストアンサー 回答者： t_fumiaki 回答日時： 2020/11/29 15:05

>>・・・でずらして戻しているということなのですね？

そういう事です。
html+cssは大きさをチャント決めて（設計して）からプログラムしないといけないのです。

100×100の中心を500×500の中心に合わせたいのなら
top: 40%;
left: 40%;
にすれば済む話なんですが・・・・・。

この回答へのお礼

有難うございます。
大変理解が深まりました。

お礼日時：2020/11/30 08:54

No.3 回答者： Ogre7077 回答日時： 2020/11/29 18:15

flexbox 等の配置方法が一般化する前には、

領域内で四角形図形を上下に中央寄せするために、
そのものずばりのプロパティが存在しませんでした。

図形幅が固定であれば、単純に top に数値指定できますが、
図形幅が可変である場合でも無理なく中央寄せさせるために、
以下の組み合わせで指定します。

top:50% で、図形上端を「領域」縦幅の中央位置に配置
left:50% で、図形左端を「領域」横幅の中央位置に配置
transform:translateY(-50%) で、図形を「図形」縦幅半分だけ上移動
transform:translateX(-50%) で、図形を「図形」横幅半分だけ左移動

ご提示のサンプルの場合ですと
領域内の図形上端の座標 = 500px/2 - 100px/2 = 200px
領域内の図形左端の座標 = 500px/2 - 100px/2 = 200px
となり
縦幅 100px の図形を上下 200px のマージン
横幅 100px の図形を左右 200px のマージン
を指定するのと同じ表示ができます。

この指定方法の利点としては、図形の width/height の数値を変えても自動的に位置が調整されることです。そもそも無指定であっても構わないので、汎用的な上下中央寄せの技法として、よく使われています。

この回答へのお礼

有難うございます。
ほとんどflex使うことが多いのですが、positionを絡めた設定の時に、たまに使わないといけないので、気になっていたので助かりました！

お礼日時：2020/11/30 08:56

No.1 回答者： t_fumiaki 回答日時： 2020/11/29 14:29

>>この時点では子要素分がずれてしまって、真ん中では無いですよね？

ど真ん中ですよ。
<div class="child">区画の左上をどこにするか、なんだから。

この回答へのお礼

有難うございます。
なるほどです、そうすると.childの中心がparentの中心に来るように、
transform: translate(-50%, -50%);

でずらして戻しているということなのですね？

お礼日時：2020/11/29 14:55