[css]レスポンスでど真ん中に正方形を表示

Question

CSSでど真ん中に正方形を表示する方法はあるでしょうか？

top:50%
left:50%
height:50%;
width:50%;

では、PC表示で横長の長方形に、スマホ表示で縦長の表示になってしまいます。

#parent {
    top:50%;
    left:50%;
    position: absolute;
    width: 50%;
    height: auto;
}
#parent:before {
    content: "";
    display: block;
    padding-top: 100%;
}
#child {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  background:black;
}

とすると、正方形にはなるのですが、画面の中央という条件が満たせません。

どうすればよいでしょうか？

Answer 1

既に解決済みですが、top、left、right、bottomの全て指定をし、margin: auto;にするのもど真ん中になります。

	.rect {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		height: 200px;
		width: 200px;
		background: #ccc;
	}

Answer 2

そういうときはcalc関数を使いましょう. CSSの値を計算で求めることが可能です. またここではCSS変数を使って幅と高さを一箇所にまとめています.

div{
	position: absolute;
	background-color: blue;
	--width: 200px;
	--height: 200px;
	left: calc(50% - var(--width) / 2);
	top: calc(50% - var(--height) / 2);
	width: var(--width);
	height: var(--height);
}

---

ところで、これを％指定で・・というのは欲張りすぎでしょうか？

pxなら問題ないですが、%にしてしまうと横長になってしまいます

たとえばこんな

div{
	position: absolute;
	background-color: blue;
	--size: 25vmax;
	left: calc(50% - var(--size) / 2);
	top: calc(50% - var(--size) / 2);
	width: var(--size);
	height: var(--size);
}

Comments

[moscow3]

CSSでも変数とか使えるんですね！　見事に成功しました。　ありがとうございました

[moscow3]

ところで、これを％指定で・・というのは欲張りすぎでしょうか？
pxなら問題ないですが、%にしてしまうと横長になってしまいます