position:relativeの親要素を上下中央にするには？

このような親要素があり、POSITIONはRELATIVEです。
※子要素があるので、RELATIVEにしたいのです。

CSS
1.wrapper {
2width: 300px;
3height: 300px;
4position: relative;
5border: 1px solid black;
6margin: 0 auto;
7}

positionがabsoluteだと上下中央はできるのですが、
positionがrelativeだとできません。

absoluteの場合

CSS
1.wrapper {
2width: 300px;
3height: 300px;
4position: absolute;
5border: 1px solid black;
6top: 50%;
7left: 50%;
8transform: translate(-50%,-50%);
9}

ご教示いただけましたら幸いです。
ありがとうございます。

追記

html
1  <body>
2<div class="wrapper">
3<div class="child1"></div>
4<div class="child2"></div>
5</div>
6</body>

s8_chu

2018/05/28 10:20

HTMLを追記していただけませんか？

退会済みユーザー

2018/05/28 11:51

失礼しました。

行動規範の内容に同意します

回答1件

ベストアンサー

.wrapperの親要素の高さがあればabsoluteと同じ書き方で天地中央になると思います。親要素に高さの指定がないと%が効きません。
なのでbody等に高さをつけるかなどするか、
.wrapper {
width: 300px;
height: 300px;
position: relative;
top: 50vh;
transform: translateY(-50%);
border: 1px solid black;
margin: 0 auto;
}
topをパーセント以外の指定にしたらどうでしょうか？