Two inner DIVs side by side and one in center - css

Question

There are two situations:
1. Two divs A & B in a container side by side
2. One div A in the same container in the center
Here is an example: http://jsfiddle.net/lvil/toj9w9zz/
.container_one, .container_two {width:200px; height:100px; background-color:red;}
.container_one .inner_a {width:100px; background-color:green; float:left;}
.container_one .inner_b {width:100px; background-color:blue; float:right;}
.container_two .inner_a{width:100px; margin:0 auto; background-color:green;}
<div class="container_one">
<div class="inner_a">
a
</div>
<div class="inner_b">
b
</div>
</div>
<br>
<div class="container_two">
<div class="inner_a">
a
</div>
</div>
Let's say the containers have the same class(not like in the example).
The number of inner DIV always changes (1 or 2).
Is it possible to make css fit both situations?
I have tried many things but could not achieve this.

Answer 1

Try inline-block, keep this inner_a rules for both divs and remove floats.
.container_one, .container_two {
background-color: #ff0000;
height: 100px;
text-align: center;
width: 200px;
}
.container_two .inner_a {
background-color: #008000;
display: inline-block;
width: 100px;
}

Answer 2

The following code is the best and least:
.inner_a {
background-color: green;
display: table;
margin: 0 auto;
width: 100px;
}
.container_one .inner_a {
float:left;
}
.container_one, .container_two {
width:200px;
height:100px;
background-color:red;
}
.container_one .inner_b {
width:100px;
background-color:blue;
float:right;
}

Answer 3

What you want to do is use display:inline-block instead of floating and then target the divs with class .inner_a when they are the last child of the parent, like so:
.container_one>div{
display:inline-block;
width:100px;
}
.inner_a{
background-color:green;
}
.inner_a:last-child{
margin:0 auto;
}
.inner_b{
background-color:blue;
}