如何垂直居中包含内容的div

Question

我有两个div div -a和div -b由另一个div div-a-b-wrapper包装。 div-a-b-wrapper是可重复的，所以所有div-a-b-wrapper都包含另一个父div div-c。

我想在div-c中垂直居中所有div-a-b-wrappers。这是我想要实现的布局：

这是我的HTML，

<div class="div-c">
     <div class="div-a-b-wrapper">
      <div class="div-a">a</div>
      <div class="div-b">b</div>
     </div>

     <div class="div-a-b-wrapper">
      <div class="div-a">a</div>
      <div class="div-b">b</div>
     </div>

     <div class="div-a-b-wrapper">
      <div class="div-a">a</div>
      <div class="div-b">b</div>
     </div>

    </div>

这是我到目前为止的CSS，

.div-c {
 width: 100%;
 height: 100px;
 border: 1px solid #333;
}

.div-a-b-wrapper {
 width: 100px;
 display: inline-block;
 margin-left: 10px;
 margin-right: 10px;
 height: 100%;
}

.div-a {
 background-color: red;
 width: 100%;
}

.div-b {
 background-color: blue;
 width: 100%;
}

但是这个.div-a-b-wrapper与div-c的顶部对齐。

如何在div-c中居中.div-a-b-wrapper？

这是一个小提琴：https://jsfiddle.net/6kfzLtx3/1/

Answer 1

根据评论更新

您可以使用flexbox

执行此操作

.div-c {
 height: 100px;
 border: 1px solid #333;
 display: flex;              /* added property */
 align-items: center;        /* added property, will center its children vertical */
 overflow: hidden            /* added property, will cut of overflowed elements */
}

.div-a-b-wrapper {
 min-width: 100px;           /* changed property, keep them at min. 100px */
 margin: 0 5px;
 border: 1px dotted red;
 /* height: 100%; */         /* removed this or else they always take 100% height */
}

.div-a {
 background-color: red;
}

.div-b {
 background-color: blue;
}

<div class="div-c">

     <div class="div-a-b-wrapper">
      <div class="div-a">a</div>
      <div class="div-b">a</div>
     </div>

     <div class="div-a-b-wrapper">
      <div class="div-a">a</div>
      <div class="div-b">a</div>
     </div>

     <div class="div-a-b-wrapper">
      <div class="div-a">a</div>
      <div class="div-b">a</div>
     </div>

     <div class="div-a-b-wrapper">
      <div class="div-a">a</div>
      <div class="div-b">a</div>
     </div>
     
     <div class="div-a-b-wrapper">
      <div class="div-a">a</div>
      <div class="div-b">a</div>
     </div>

     <div class="div-a-b-wrapper">
      <div class="div-a">a</div>
      <div class="div-b">a</div>
     </div>

     <div class="div-a-b-wrapper">
      <div class="div-a">a</div>
      <div class="div-b">a</div>
     </div>

</div>

Answer 2

试试这个css：

.div-c {
    position: relative;
    width: 100%;
    height: 100px;
    border: 1px solid #333;
}

.div-a-b-wrapper {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
   width: 100px;
   display: inline-block;
   margin-left: 10px;
   margin-right: 10px;
   border: 1px dotted red;
}

.div-a {
   background-color: red;
   width: 100%;
}

.div-b {
   background-color: blue;
   width: 100%;
}

Answer 3

.div-c {
 width: 100%;
 height: 100px;
 border: 1px solid #333;
 padding:20px;
 display: flex;
 align-items: center;
}

.div-a-b-wrapper {
 width: 100px;
 display: inline-block;
 margin-left: 10px;
 margin-right: 10px;
 height: 100%;
 border: 1px dotted red;
}

.div-a {
 background-color: red;
 width: 100%;
}

.div-b {
 background-color: blue;
 width: 100%;
}

Try this:

<div class="div-c">
     <div class="div-a-b-wrapper">
      <div class="div-a">a</div>
      <div class="div-b">a</div>
     </div>

     <div class="div-a-b-wrapper">
      <div class="div-a">a</div>
      <div class="div-b">a</div>
     </div>

     <div class="div-a-b-wrapper">
      <div class="div-a">a</div>
      <div class="div-b">a</div>
     </div>

    </div>

Answer 4

这可能是一个需要研究的解决方案。强烈推荐flexbox。

.div-c {
width: 100%; height: 100px; border: 1px solid #333; display: flex; flex-direction: row; justify-content: space-around;
}

.div-a-b-wrapper {
 width: 100px;
 display: inline-block;
 margin-left: 10px;
 margin-right: 10px;
 height: 100%;
 border: 1px dotted red;
}

.div-a {
 background-color: red;
 width: 100%;
}

.div-b {
 background-color: blue;
 width: 100%;
}

<div class="div-c">
     <div class="div-a-b-wrapper">
      <div class="div-a">a</div>
      <div class="div-b">a</div>
     </div>

     <div class="div-a-b-wrapper">
      <div class="div-a">a</div>
      <div class="div-b">a</div>
     </div>

     <div class="div-a-b-wrapper">
      <div class="div-a">a</div>
      <div class="div-b">a</div>
     </div>

    </div>

Answer 5

使用Flex-box

将以下样式应用于div-c

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

然后申请

display: flex;
flex-direction: column;

到div-a-b-wrapper

.div-c {
  border: 1px solid #333;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100px;
  border: 1px solid #333;
  padding: 20px;
  box-sizing:border-box;
}

.div-a-b-wrapper {
  margin-left: 10px;
  margin-right: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100px;
}

.div-a {
  background-color: red;
}

.div-b {
  background-color: blue;
}

<div class="div-c">
  <div class="div-a-b-wrapper">
    <div class="div-a">a</div>
    <div class="div-b">b</div>
  </div>

  <div class="div-a-b-wrapper">
    <div class="div-a">a</div>
    <div class="div-b">b</div>
  </div>

  <div class="div-a-b-wrapper">
    <div class="div-a">a</div>
    <div class="div-b">b</div>
  </div>

</div>

Answer 6

您可以在容器内使用3个不同的面板。 您可以使用以下代码：

#content{
    float: fixed;
    height: 100%;
    margin-left: 20%;
    margin-right: 20%;
    display: block;
    padding-bottom: 0;
    margin-bottom: 0;
    width: 60%;
}
#navbar{
    float: left;
    height: 100%;
    text-align: justify;
    width: 20%;
    display:block;
    margin-right: 80%;
}
#rightpanel{
    float: right;
    margin-left: 80%;
    height: 100%;
    width: 20%;
    text-align: justify;
    display: block;
}
#container{
    position: absolute;
    float:none;
    overflow: hidden;
    height: 100%;
    width: auto;
    left: 0%;
    right: 0%;
    top: 0;
    bottom: 0;
    margin: 0;
}

在项目中包含此内容后，您可以使用以下代码语法垂直对齐中心的内容div：

<body>
<div class="container">
   <div class = "navbar">
      left column content goes here.....
   </div>
   <div class="content">
      content goes here....
   </div>
   <div class="rightpanel">
      right panel...
   </div>
</div>
</body>

Answer 7

试试这可能会对你有帮助。

.div-c {
 width: 100%;
 height: 100px;
 border: 1px solid #333;
 text-align: center;
vertical-align: middle;
display: table-cell;
vertical-align: middle;
}

.div-a-b-wrapper {
 width: 100px;
 display: inline-block;
 margin-left: 10px;
 margin-right: 10px;

 border: 1px dotted red;
}

.div-a {
 background-color: red;
 width: 100%;
}

.div-b {
 background-color: blue;
 width: 100%;
}

<div class="div-c">
     <div class="div-a-b-wrapper">
      <div class="div-a">a</div>
      <div class="div-b">a</div>
     </div>

     <div class="div-a-b-wrapper">
      <div class="div-a">a</div>
      <div class="div-b">a</div>
     </div>

     <div class="div-a-b-wrapper">
      <div class="div-a">a</div>
      <div class="div-b">a</div>
     </div>

    </div>

Answer 8

试试这个：https://jsfiddle.net/k2e8dzmo/

<div class="div-c">
     <div class="div-a-b-wrapper">
      <div class="div-a">a</div>
      <div class="div-b">a</div>
     </div>

     <div class="div-a-b-wrapper">
      <div class="div-a">a</div>
      <div class="div-b">a</div>
     </div>

     <div class="div-a-b-wrapper">
      <div class="div-a">a</div>
      <div class="div-b">a</div>
     </div>

    </div>

CSS

.div-c {
 width: 100%;
 height: 125px;
 border: 1px solid #333;
 display: flex;
 flex-direction:row;
 justify-content:center;
 align-items:center;
}

.div-a-b-wrapper {
 width: 100px;
 text-align:center;
 margin-left: 10px;
 margin-right: 10px;


}

.div-a {
 background-color: red;
 width: 100%;
}

.div-b {
  margin-top:5px;
 background-color: blue;
 width: 100%;
 height:75px;
}

Answer 9

也许把一个中心放在div-c中：

{{1}}