How to place an element (button) in the centre of a container - html

Question

I am wanting to place this green button in the middle of a container, however despite my efforts I am unable to achieve this and instead it's stuck to the left. I have done some research and have done what others have suggested but still have no luck.
I have attached an image of the problem and my code so you can see what I have tried, any suggestions would be appreciated!
The problem:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #5f7a61;
font-family: 'roboto', sans-serif;
}
.controls {
width: 100%;
display: flex;
justify-content: centre;
align-items: centre;
margin: auto;
margin-top: 20px;
}
.play-btn {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
background: #d5eebb;
cursor: pointer;
border: none;
}
<div class="music-player">
<h1 class="music-name">song one</h1>
<p class="artist-name">artist</p>
<div class="disk"></div>
<div class="song-slider">
<input type="range" value="0" class="seek-bar">
<span class="current-time">00:00</span>
<span class="song-duration">00:00</span>
</div>
<div class="controls">
<button class="play-btn">
<span></span>
<span></span>
</button>
</div>
</div>
<!-- FORM BODY-->

Answer 1

Give the parent element of the button (div.controls) the following CSS styles:
display: flex;
align-items: center;
justify-content: center;

Answer 2

You can add these css attributes to your .music-player class.
.music-player{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #5f7a61;
font-family: 'roboto', sans-serif;
}
.music-player{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.controls {
margin: auto;
margin-top: 20px;
}
.play-btn {
width: 60px;
height: 60px;
border-radius: 50%;
background: #d5eebb;
cursor: pointer;
border: none;
}
<div class="music-player">
<h1 class="music-name">song one</h1>
<p class="artist-name">artist</p>
<div class="disk"></div>
<div class="song-slider">
<input type="range" value="0" class="seek-bar">
<span class="current-time">00:00</span>
<span class="song-duration">00:00</span>
</div>
<div class="controls">
<button class="play-btn">
<span></span>
<span></span>
</button>
</div>
</div>