在一个div中居中多个div

我目前的div看起来像这样:

这应该是这样的:

在我的css文件中,我有这个代码:

.noteWrapperDiv { /* the container div */
  width: 100%;
  height: 50px;
  background-color: #21252B;
  border-width: 2px;
  border-style: solid;
  border-radius: 5px;
  border-color: #9DA5B4;
}

.noteContentDiv { /* the first inner div */
  color: #9DA5B4;
  float: left;
}

.noteButtonBarDiv { /* the second inner div */
  float: right;

}

所以我的包装器中的两个div应该居中.我尝试左右浮动,顶部:50%,但它没有集中..

您可以使用 flexbox

div{
  height:50px;
  display:flex;
  align-items:center;
  background:#000;
  justify-content: space-between;
  color:#fff;
  padding:0 10px;
}

  Placeholder
  Right