如何将元素置于另一个元素和容器边缘之间

Question

我尝试使用margin:0 auto;然后margin-left:auto; margin-right:auto;在第二个和右边缘之间居中第一个按钮，但无济于事。什么是实现这一目标的最佳方式？

<nav class="bg">    
    <button>Button 1</button>
    <button>Button 2</button>
    <button id="center">Button 3</button>
</nav>

https://jsfiddle.net/gabewest1/1915gwmy/1/

Answer 1

https://jsfiddle.net/1915gwmy/2/检查此更新的代码

.bg {
    background-color:black; 
  text-align:center;
}
#center {
    margin:auto;
    background-color:green;
}
button {
  float:left;
  margin-right: 5px;
}
button:last-child {
  float:none;
  margin-right: 0;
}