Как получить img внизу и в центре div без использования абсолютной позиции

Question

Я новичок в HTML и CSS (2 недели), и это первый раз, когда я использую переполнение стека. Я пытаюсь расположить img в нижней части div и в центре нижней стороны и не могу найти решение. Я хотел бы сделать это без использования position: absolute, потому что img будет перемещаться, когда вы открываете страницу на меньшем / большом экране

именно это изображение я бы хотел переместить: "<img class="mnt" src="mountain.png" alt="mountain image">

body { 
  text-align: center;
  margin:0;
}
 
h1 {
  font-size: 5.6rem;
  margin:0;
  color: white;
  line-height: 2;
  font-family: 'Clicker Script', cursive;
}
    
h2 {
  font-weight: normal;
  font-family: 'Kavivanar', cursive;
}
    
.nav {
  background-color: #87c6eb;
  text-align: right;
  padding-top: 50px;
}

.top {
  background-color: #87c6eb;
  height: 100vh;
}
    
.programer {
  font-size: 150%;
  color: white;
}

.top-cloud {
  position:absolute;
  top:100px;
  right: 300px;
  opacity: 70%;    
}
    
.bottom-cloud {
  position:absolute;
  left: 350px;
  opacity: 45%;   
}
    
.mnt {
  /* ???????? */
}

<div class="top">
  <nav class="nav">
    <a href="#About" class="navigation">About</a>
    <a href="#Work" class="navigation">Work</a>
    <a href="#contact" class="navigation">Contact</a>
  </nav>
  <img class="top-cloud" src="cloud.png" alt="cloud img">
  <h1>I`m Veljko</h1>
  <h2 class="programer"><em>future programmer</em></h2>
  <img class="bottom-cloud" src="cloud.png" alt="cloud img">
  <img class="mnt"  src="mountain.png" alt="mountain img">
</div>

Answer 1

Это очень просто с flex, я увеличил высоту .top до 300vh, так что вы можете легко увидеть результат здесь,

body { 
  text-align: center;
  margin:0;
}
 
h1 {
  font-size: 5.6rem;
  margin:0;
  color: white;
  line-height: 2;
  font-family: 'Clicker Script', cursive;
}
    
h2 {
  font-weight: normal;
  font-family: 'Kavivanar', cursive;
}
    
.nav {
  background-color: #87c6eb;
  text-align: right;
  padding-top: 50px;
}

.top {
  background-color: #87c6eb;
  height: 300vh;
display: flex; 
flex-direction: column;
}
    
.programer {
  font-size: 150%;
  color: white;
}

.top-cloud {
  position:absolute;
  top:100px;
  right: 300px;
  opacity: 70%;    
}
    
.bottom-cloud {
  position:absolute;
  left: 350px;
  opacity: 45%;   
}
    
.mnt {
  /* ???????? */
margin: auto auto 0;
}

<div class="top">
  <nav class="nav">
    <a href="#About" class="navigation">About</a>
    <a href="#Work" class="navigation">Work</a>
    <a href="#contact" class="navigation">Contact</a>
  </nav>
  <img class="top-cloud" src="cloud.png" alt="cloud img">
  <h1>I`m Veljko</h1>
  <h2 class="programer"><em>future programmer</em></h2>
  <img class="bottom-cloud" src="cloud.png" alt="cloud img">
  <img class="mnt"  src="mountain.png" alt="mountain img">
</div>

Answer 2

Можете попробовать, у меня это сработало.

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}
<div id="footer">  
    <img class="mnt"  src="mountain.png" alt="mountain img">
</div>