【問題】margin-topについて

問題

以下のhtmlとCSSにより親要素の中心に子要素が表示されることを期待したが、うまく行きませんでした。なぜうまく行かなかったのか、うまく表示させるためにはどうすればいいか説明しなさい。

html

<div class="parent">
  <div class="child"></div>
</div>

CSS

.parent {
  margin: 30px;
  width: 240px;
  height: 240px;
  background-color: green;
}
.child {
  margin: 60px;
  width: 120px;
  height: 120px;
  background-color: red;
}

期待する表示内容

回答

【回答】margin-topについて - 迷い人