Background-color does not accompany content

Your "background" of div parent does not accompany the div's daughters because you have a fixed height in it, in case height:240px; takes it and will follow it.

And to align the child elements horizontally, just put a margin: 0 auto; on them!

#pai {
  background-color:#000;
  width:600px;
  line-height:280px;
  text-align:center;      
}

.filho {
  margin: 0 auto;
  background-color:#CCC;
  width:300px;
  height:240px;   
}

<div id="pai">

  <div class="filho">

    teste 2!

  </div>

  <div class="filho">

    teste 3!

  </div>

</div>

Now if you actually have fixar height in the parent element, you do not have background to track the children.

I'm going to explain the first few problems, first vertical-align is used for element siblings and they are inline or inline-* (text type), div by default are block which is different from "text type".

In other words, you applied vertical-align expecting to affect block objects and that they are parent and child and not siblings, one way to use vertical-align would be this (this is not a solution is just to explain vertical-align) / p>

.irmao-1 {
    background: #fc0;
    height: 160px;
}

.irmao-2 {
    background: #ccc;
    height: 240px;
}

.irmao-1, .irmao-2 {
    display: inline-block;
    vertical-align: middle;
}

<div class="irmao-1">
  Irmão 1
</div>
<div class="irmao-2">
  Irmão 2
</div>

Another thing that seems to be confusing is the background, the background only affects the element itself, each element will have its own background and the background property will never leak the element.

One thing, you do not need to "fix" the height of all elements, you could use padding for example:

.pai {
   background-color: #000;
   padding-top: 20px;
   padding-bottom: 20px;
}

.filho {
   background-color: #ccc;
   width:300px;
   height: 240px;
}

<div class="pai">
    <div class="filho">
       oi
    </div>
</div>

The sum of height: 240px with padding-top: 20px and padding-bottom: 20px will make the parent element have 280px

An example with two divs:

.pai {
   background-color: #000;
   padding-top: 20px;
   padding-bottom: 20px;
}

.filho-1 {
   margin: 0 auto; /*centraliza horizontal*/
   background-color: #ccc;
   width:300px;
   height: 240px;
}

.filho-2 {
   margin: 0 auto; /*centraliza horizontal*/
   background-color: #fc0;
   width:300px;
   height: 240px;
}

<div class="pai">
    <div class="filho-1">
       oi
    </div>
    <div class="filho-2">
       oi
    </div>
</div>