如何将元素(按钮)放置在容器的中心

Question

我想把这个绿色的按钮放在一个容器的中间，然而，尽管我努力了，我还是无法做到这一点，相反，它被粘在左边。我已经做了一些研究，做了其他人的建议，但仍然没有运气。

我已经附上了问题的图片和我的代码，这样你就可以看到我尝试过什么，任何建议都将不胜感激！

问题是：

​

* {
  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

为按钮(div.controls)的父元素提供以下CSS样式：

display: flex;
align-items: center;
justify-content: center;

Answer 2

您可以将这些css属性添加到..music player类中。

.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>

​