【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」
忙しい方に、
![【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」](https://kenjimorita.jp/wp-content/uploads/2016/12/39fc35f7f0b8f59aad83502c9398f9e4-1024x272.png)
demoコードはこちら
https://kenjimorita.jp/sample/demo.html
今デスクトップで【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」のdemoをスマホで見たい方はこちら
![今デスクトップで【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」のdemoをスマホで見たい方はこちら](https://kenjimorita.jp/wp-content/uploads/2016/12/6245bd1d5966a65403234274640aa039.png)
・開発ツールを開いてファファファの文字列を増やしてください。増えても縦に対して中央、真ん中になります。
もしくはここいじって見てください
一応ここにも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あり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」](https://kenjimorita.jp/wp-content/uploads/2016/12/884110da928f14e004effd8986dcb291-1024x511.png)
考え方は上の一緒です。
demoはこちら
今デスクトップで【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」のdemoをスマホで見たい方はこちら
![【CSS】demoあり「縦や画面幅に対して中央にする(可変な文字インライン要素)方法」](https://kenjimorita.jp/wp-content/uploads/2016/12/333aa497d7d19a1350aa1c429ee891e1.png)
もしくはここいじって見てください。
一応ここにも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に対象となる値を知らせるため。
でわーーーー。