CSSで上下左右中央にすると下に余白ができる

Question

前提・実現したいこと

画像やblock要素をネットで調べてCSSで上下左右中央にしました。
そのおかげでページを開いた際の見た目は縦横中央に配置されているのですが、
下に無駄な余白ができてしまいました。
その余白をなくしたいと思い、質問をさせていただきました。

該当のソースコード

Comments

[Ftps]

できればhtmlのコードも記述してください。

[whyyasai]

載せました、ありがとうございます。

[javahack]

過去の質問のソースコードを全部消しているようですが、コードを隠したいのなら悪手ですよ。
消したコードは編集履歴から見れます。また、編集したことによって質問がトップページに表示されて余計に関心を引き付けています。

[whyyasai]

そんなことができるんですね、困りましたね。。

Answer 1

htmlのコードを見ていないので詳しくはわかりませんが、

//Line-height...文章の行間を調整するCSS
要素{
line-height:0;
}

	
要素{
//font-size...文字の大きさ
font-size:0;
}

要素{
//margin,padding...余白を指定するcss
margin:0;
padding:0;
}

のいずれかを行ってみてください。

また、あまり推奨はしませんがリセットcssというものもあります。

*{
margin:0;
padding:0;
}

*(アスタリスク)は全ての要素のことを指します

また、他にも、normalizeを使用してみてもいいかもしれません。

https://necolas.github.io/normalize.css/

Comments

[whyyasai]

全て試してみましたが、望んでいるものにはなりませんでした。
すみません、ありがとうございます。

[Ftps]

そうんですか...お役に立てず申し訳ないです

Answer 2

...縦横中央に配置されているのですが、下に無駄な余白ができてしまいました。

縦横中央に配置したいということは、余白があるのは当たり前なのではないでしょうか？

高さが設定されていないようなのでどこの縦横中央にしたいか不明ですが、単純に padding であけるのはどうですか？

.all {
  text-align: center;
  padding: 100px 0;
}

---

追記
こちらではどうでしょうか

.all {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Comments

[whyyasai]

paddingで設定すると私の思っているものにはならないんですよね。。。
どのデバイスで見ても（高さが変わっても）画面の中央になるようにしたいです。

[agumon]

コードを追加しました。
こちらで試してみてください。