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.3
- 回答日時:
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を絡めた設定の時に、たまに使わないといけないので、気になっていたので助かりました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画面に表示したらアニメーションを開始したい 3 2023/01/13 15:38
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教えるわが家の防犯対策術!
ホームセキュリティのプロが、家庭の防犯対策を真剣に考える 2組のご夫婦へ実際の防犯対策術をご紹介!どうすれば家と家族を守れるのかを教えます!
-
htmlの文字が縦書きになる
HTML・CSS
-
<a href=#" …>の意味を教えてください。"
HTML・CSS
-
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
-
4
return trueとreturn falseの用途・違いは・・・?
JavaScript
-
5
ページの上下に白い横線が入る
HTML・CSS
-
6
tableにul,または,olを入れられますか?
ホームページ作成・プログラミング
-
7
TRタグの余白をcssで設定するには
HTML・CSS
-
8
画像の上にテキスト配置で、拡大縮小でずれないようにする方法についてアドバイス願います。
HTML・CSS
-
9
FTPでの上書きが拒否されます。
UNIX・Linux
-
10
CSSを1ページに1枚作るのって変ですか??
HTML・CSS
-
11
テーブルの横に画像を
HTML・CSS
-
12
英語の改行位置について
英語
-
13
リストマーカーをボックス内に収めて、かつ、<li>内の文章だけをリストマーカーよりもインデントする方法は?
HTML・CSS
-
14
テーブルセル余白(例えば左側だけ、上側だけ、など)
HTML・CSS
-
15
<ul><li></li></ul>にするメリットって?
HTML・CSS
-
16
ラジオボタンのチェックが外れた時に、イベントを発生させることはできますか?
JavaScript
-
17
CSSで背景画像をランダムに表示させたいのですが
HTML・CSS
-
18
ulタグやliタグの中でbrタグは使えない?
HTML・CSS
-
19
Photoshopでパスのオフセットのような機能
Photoshop(フォトショップ)
-
20
bodyにwidth:100%をつける理由は?
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
インラインフレームの表示位置...
-
FireFoxで見るとブラウザの幅に...
-
HTMLフォームのSELECTの幅を一...
-
<h1>タグの後の行間を詰めたい。
-
フッターだけが真ん中に行って...
-
文字などを右に寄せるには。
-
テキストボックスの文字を右揃...
-
コードを書いて下さい( ; ; )...
-
右と左の両端に色を付けるには?
-
DIVボックス内でのCSSを使用し...
-
画面サイズ・横1024の場合の表...
-
CSSでテキストを垂直、中央に設...
-
text-alignの解除の方法
-
なぜ左に寄っているの?
-
INPUT TEXT内の文字位置を指定...
-
marginを指定した見出し要素の...
-
H1 タグの行間
-
引用文を囲むボックスの作り方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
<h1>タグの後の行間を詰めたい。
-
HTMLフォームのSELECTの幅を一...
-
インラインフレームの表示位置...
-
コードを書いて下さい( ; ; )...
-
端から端まで横線を引きたい
-
INPUT TEXT内の文字位置を指定...
-
なぜ左に寄っているの?
-
FireFoxで見るとブラウザの幅に...
-
iPhone用のサイトの文字がずれ...
-
<legend>で表示されるタイトル...
-
Formタグのブロックの高さについて
-
macとwindowsのレイアウト崩れ...
-
CSSでh1とその下の文字との行間...
-
Dreamweaverで画面サイズを一定...
-
ホームページビルダー 空白の...
-
text-alignの解除の方法
-
パソコンのみで反映される余白...
-
Firefox 横スクロールバーを表...
おすすめ情報