CSS使divs自动浮动

Question

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

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;
}

Answer 1

用display:inline-block而不是float:left.尝试删除我的示例小提琴中的第二个子div,您可以看到所需的结果.

div.subdiv {
display:inline-block;
padding: 20px;
}

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

DEMO