CSS使div自动浮动

我有一个 main div 在下面可以 one or two sub divs 。当有两个子div时,我希望它们并排显示。但是如果我只有一个子div,那么我希望它显示在中心。这可以通过使用CSS实现吗?还是应该借助JavaScript?使用下面的CSS,我能够实现它的并行部分

HTML格式:

<div id="maindiv">
    <div class="subdiv">
        <p>Div One</p>
    </div>

    <div class="subdiv">
        <p>Div Two</p>
    </div>
</div>

CSS:

div.subdiv {
    float: left;
    padding: 20px;
}

div#maindiv {
    border: 2px solid black; 
    height: 120px;
    width: 200px;
}