在一个div中居中多个div

Question

我现在的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％，但它没有集中......

Answer 1

您可以使用flexbox

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

<div>
  Placeholder
  <button>Right</button>
</div>

Answer 2

更改此css

.noteWrapperDiv { /* the container div */
  width: 100%;
  height: 30px;/*Change This*/
  padding:10px 0;/*Add This*/
  background-color: #21252B;
  border-width: 2px;
  border-style: solid;
  border-radius: 5px;
  border-color: #9DA5B4;
}

Answer 3

您可以使用flex属性来实现此目的，请参阅以下示例：

https://codepen.io/anon/pen/vmgjwV

<div class="wrapper">
    hola!
</div>

div.wrapper {
  display:flex;
  align-items:center;
  border:2px solid red;
  height:100px;
}