htmlで図形のheightを大きくすると図形が下にに行ってしまう

Question

前提・実現したいこと

僕はhtmlでサイトを作ってるのですが、サイトにツールバーを開くための便利なボタンを作りました。ボタンの装飾を増やすために大きさが異なる複数の図形を重ね掛けしたりしました。この時に問題が起きます。図形の大きさを変えるときに図形の位置が変わってしまうのです。どういうことかというと、例えばheightの値を大きくすると、その図形の上端の位置はそのままのなのですが、図形の下端は下に行ってしまいます。当たり前のことだと思いますが、これが僕にとってすごく大変で手間がかかることになるのです。下に行ってしまった図形をわざわざミリ単位で位置を調節してやって、確認して、また調節して、、、、、こんな生活もうこりごりなんです。そこで僕が思いついたのは図形の基準を真ん中に指定することです。今までは基準が上端にあったせいでheightを大きくすると図形が下に下がってしまいました。それを基準を真ん中にすることで、heightを大きくしたときに上にも下にも均一に値を大きくすることができないかと思ったんです。調べてみたのですが詳しい説明のサイトがあまりなく、初心者にわかるかぁ！って質問ばかりです。htmlに詳しい方、図形の基準を真ん中にする方法はありますか？

追記

長文になってすみません。しかし、僕がホームページを作成するときに特にロスした時間が図形の位置調整だと思うとなんだか切ないです（笑）詳しい方、僕に手を、、、、、、、！

Comments

[Lhankor_Mhy]

どうやって重ねているのでしょうか？

ソースコードを書きましょう
https://teratail.com/help/question-tips#questionTips3-5-1

[ga-doman]

.menu-1{
top:-1.5vh;
left:-0.35vw;
position:absolute;
height:0%;
width:0%;
border-radius:50%;
background:white;
}

.line-circle-2{
top:-2vh;
left:0vw;
height:0%;
width:0%;
position:absolute;
border-radius:50%;
background:black;
}
特に変わったことはしませぬ。絶対ポジ指定&安定のtop,left指定でおしまいです。そして
めんどくさいのはミリ単位で何十回も調節することです。

Answer 1

ソースが無いので、何ともですが、、、

<div class="wrap">
	<div class="a1"></div>
	<div class="a2"></div>
	<div class="a3"></div>
</div>

このようなhtmlを「position」で設定して
ちょこちょこ動かしてらっしゃるのかな?

縦横の最大値を決めて
「transform & flex」にすると
変更の手間は減ると思います^^

▼ コード

<div class="wrap">
	<div class="a1"><span></span></div>
	<div class="a2"><span></span></div>
	<div class="a3"><span></span></div>
</div>

/* ▼divを同サイズ(最大値)にして、overflow: hidden; ではみ出しを消します */
.wrap, .a1, .a2, .a3 {
	width: 200px; 
	height: 150px; 
	overflow: hidden; 
}
/* ▼内側divを display: flex; にして縦横中央に */
.a1, .a2, .a3 {
	display: flex;
	align-items: center;
	justify-content: center;
}
/* ▼transform:translateYで位置が上揃えになるように移動 */
.a2 {transform:translateY(-150px); }
.a3 {transform:translateY(-300px); }

/* ▼spanが実際に表示されるパーツになります */
.wrap span {display: block; }
.a1 span {width: 150px; height: 100px;  background: #f00; }
.a2 span {width: 100px; height: 150px; background: #f66; }
.a3 span {width: 50px; height: 80px; background: #faa; }

.wrap, .a1, .a2, .a3は必ずspanより大きくなるようにします

Answer 2

サンプル

body{
  display: flex;
  align-items: center;
}