CSS3

【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」

【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」

忙しい方に、

【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」
【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」

demoコードはこちら
https://kenjimorita.jp/sample/demo.html

今デスクトップで【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」のdemoをスマホで見たい方はこちら

今デスクトップで【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」のdemoをスマホで見たい方はこちら
今デスクトップで【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」のdemoをスマホで見たい方はこちら

・開発ツールを開いてファファファの文字列を増やしてください。増えても縦に対して中央、真ん中になります。
もしくはここいじって見てください

一応ここにもCSSのコード
[code language="css"]
div {
height: 300px;
background: #e6e6e6;
}
span {
position: relative;
top: 50%;
left: 50%;
display: inline-block;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
[/code]

 

いやいやそうじゃない画面幅に対して真ん中にしたいんだの方

【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」
【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」

考え方は上の一緒です。

demoはこちら

今デスクトップで【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」のdemoをスマホで見たい方はこちら

【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」
【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」

もしくはここいじって見てください。

一応ここにもCSSのコード
[code language="css"]
body {
position: relative;
height: 100vh;
}
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 300px;
background: #e6e6e6;
}
span {
position: relative;
top: 50%;
left: 50%;
display: inline-block;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
[/code]

考え方
1.何に対して中央にしたいか??

2
→親要素に対して、子供を中央にしたいなら、1。その親に上記divのスタイルを当てる。
→画面に対して、ある要素を中央にしたいなら、2、bodyに対してスタイルを当てる。

3 中央にする要素にはposition。上下真ん中にして、ネガティブマージンの代わりに可変なので、transformを当てる。-webkit-はiOS用。
もし可変じゃないならその幅分/2のネガティブマージンをしてあげる。

※inline-blockは今回の文字列のように長さが動的になる場合必要。transformに対象となる値を知らせるため。

でわーーーー。