制作100％高度的div

Question

我正在学习编码的第一步。我一直在网上学习一些课程，现在我决定继续学习，同时建立一个Wordpress儿童主题。

问题是我有两个div，我希望我的第一个div（图像）占据窗口高度的100％。然后，如果我向下滚动，我可以看到第二个div（正文）。

事实上，它与使用MOMA网站http://www.moma.org/calendar/exhibitions/1614

的效果相同

浏览S.O我发现了一个与此类问题非常类似的问题：How can I make a div 100% of window height?

从这里开始制作我自己的版本，但即使使用height: 100%它也不起作用：

.image {

    min-width: 50%;
    min-height: 100%;
    height:100%;
    margin: 0 auto;
    left:0;
    right:0;
    z-index: 100;
    padding:40px;

}

.text {
    
    font-size: 20px;
    font-weight: 400;
    font-family: roboto;
    text-align: left;
    margin: 40px;
    margin-left: 20px;
    line-height: normal;
    display: block;

}

<div id="image">

<img src="https://www.discovernorthernireland.com/image.aspx?ImageID=59529&Width=600&Height=400&Bg=">

        </div>

<div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sapiente voluptatem deleniti sunt quos earum distinctio ea eaque dolore velit optio aliquid nihil quia qui dignissimos tempora dolorem. Voluptates voluptate.</p>
            
</div>

我无法使我的图像在浏览器中垂直和水平居中。紧随其后没有文字。

你有什么建议吗？谢谢你的帮助。