居中div，其高度超过视口的高度

Question

我肯定这个问题已经回答了，但是我找不到答案，我有一个页面包含一个主div，其中包含所有内容。我已经使用它居中了：

.center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

当div的高度不大于视口的高度时，哪个效果很好，但是当div的高度移动到屏幕内容的一半时。这可以在移动设备上轻松演示（参见图片）

我可以通过仅在桌面上应用转换来解决此问题，但是如果div的高度增加的地方会再次出现此问题。或者使用一些JavaScript，我可以检查div的高度是否低于视口的高度，然后进行转换，但我希望仅将其保留为CSS。我该怎么解决？

Answer 1

您可以使用flexbox +边距技巧：

html,
body {
  height: 100%;
}

body {
  display: flex;
  margin: 0;
}

.center {
  max-width: 50%;
  margin: auto;
}

<div class="center">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec mi maximus, pretium nunc eget, congue nulla. Nam ornare ornare nisl accumsan suscipit. Quisque blandit tortor ac placerat lobortis. Orci varius natoque penatibus et magnis dis parturient
  montes, nascetur ridiculus mus. Ut varius a neque a venenatis. Morbi non justo dapibus, bibendum nunc vel, tempus nulla. Nam ornare, sem nec volutpat tincidunt, arcu arcu facilisis nisi, ut lobortis metus ante quis orci. In velit velit, pellentesque
  nec suscipit non, euismod nec metus. Cras pulvinar eu nisl at convallis. Nam vehicula interdum dui, sit amet vestibulum sapien consectetur id. Morbi non velit eros. Fusce ac pretium massa. Nam sit amet nibh ac magna bibendum porta. In maximus tempus
  nulla. Sed a massa ligula. Vestibulum viverra odio quis ex consequat semper. Vestibulum ex lectus, pellentesque sed quam eget, porta volutpat magna. Praesent pulvinar auctor ante, eget dictum tortor egestas non. Donec maximus sem eu nisl commodo, quis
  varius lectus suscipit. In vestibulum est diam, id ornare lacus fermentum a. Fusce dictum ligula eros, non pellentesque lorem pulvinar consectetur. Nunc sapien metus, feugiat ac sagittis sed, euismod sed purus. Curabitur quis iaculis lacus, dapibus
  ultrices leo. Curabitur ac lacinia purus. Pellentesque accumsan pulvinar erat non viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In venenatis porttitor erat non eleifend. In eget auctor nulla.
  Aenean ultricies dapibus nisi eget venenatis.
</div>

Answer 2

我建议您在div中添加margin-top和margin-bottom：在台式机上，t不会有任何变化，但是在移动设备上，div的高度会更短。