How can I put my icons at the bottom centre of the webpage?

Question

Is anyone here able to think of a way which I can put my icons .chevron-row at the bottom centre of each section of my webpage without using position: relativeand position: absolute due to the impacts it has. Site code

SECTION1

<a href="#part2">
     <i class="fa fa-chevron-down fa-3x" aria-hidden="true"></i>
</a>

SECTION 2

<a href="#part3">
     <i class="fa fa-chevron-down fa-3x" aria-hidden="true"></i>
</a>

SECTION3

<a href="#part1">
     <i class="fa fa-chevron-up fa-3x" aria-hidden="true"></i>
</a>


<a href="#part2">
     <i class="fa fa-chevron-up fa-3x" aria-hidden="true"></i>
</a>

Answer 1

Try this:

.chevron-row{   
color: white;
bottom: 0;
position: absolute;
width: 100%;}

https://jsfiddle.net/qu8nushL/20/

Answer 2

Use a flexbox and align the icon at the end of it

.section1 {
  display: flex;
  width: 100%;
  height: 200px;
  flex-wrap: wrap;
}

.section-content {
width: 100%;
}

.icon {
  text-align: center;
  width: 100%;
  align-self: flex-end;
}

.icon a {
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="section1">
  <div class="section-content">
    <h1>Heading</h1>
    <p>Paragraph</p>
  </div>
  <div class="icon">
    <a href="#part2">
      <i class="fa fa-chevron-down fa-3x" aria-hidden="true"></i>
    </a>
  </div>
</div>

Answer 3

#part1,
#part2,
#part3 {
  height: 100vh;
  width: 100%;
}

#part1 {
  background: #39A0ED;
}

#part2 {
  background: #32322C;
}

#part3 {
  background: #36F1CD;
}

.chevron-row {
  color: white;
  position: absolute;
  width: 100%;
  top: 90vh;
}

.chevron-row a {
  color: white;
}

Here is code