如何创建垂直响应的网页？

Question

我正在尝试创建一个单页网页，但是问题是我正在将margin-top与em一起使用，以垂直放置一些元素。在某些屏幕上，它被向下推得太多而看不见，从而迫使用户向下滚动。这是我不可接受的。我尝试使用媒体查询，但问题是screen only并非总是能正常工作，因为标签，地址栏，书签栏等也占用空间。我只是对如何做到这一点感到困惑。请帮忙。

Answer 1

如果您共享了代码，我将获得清晰的画面。无论如何，跟随CSS可以帮助您创建一个高度与窗口一样长的容器/包装器，容器中的所有元素都将垂直和水平放置在中心。

.container {
    height: 100vh;
    display:flex;
    flex-direction: column;
    align-items: center;   //center vertically
    justify-content: center;  //center horizontally
}