css margin-top设置的百分比竟然是基于父元素的宽度来计算的

一直以来，都以为margin-top设置百分比的话是基于父元素的高度计算的，今天实际用到的时候却发现并非如此，实际上是基于父元素的高度来计算的。
如果我们想让某个元素垂直居中，最快最好的方式是设置父元素为flex布局：display:flex;然后再利用两个属性即可：

justify-content: center;
align-items: center;