Center multiple divs in another div?

Issue

I have four divs contained in another div, and I want the four inner divs to be centered.

I have used float: left on the four divs so that they are horizontally aligned.

CSS:

<style>
    .square  //inner divs
    {
        float: left;
        margin:1pt;
        width:72pt;
        height:72pt;
    }
    .container //outer divs
    {
        text-align:center;
        width:450pt;
        height: 80pt;
    }
</style>

and HTML:

<div class = "container">
    <div class = "square">...</div>
    <div class = "square">...</div>
    <div class = "square">...</div>
    <div class = "square">...</div>
</div>

How can I center the divs inside the container?

The number of inner divs can be variable.

Solution

Here's an alternate method if you can use an extra div:

<div class = "container">
  <div class="centerwrapper">
    <div class = "square">...</div>
    <div class = "square">...</div>
    <div class = "square">...</div>
    <div class = "square">...</div>
  </div>
</div>

<style>
    .square
    {
        float: left;
        margin:1pt;
        width:72pt;
        height:72pt;
    }
    .container
    {
        text-align:center;
        width:450pt;
        height: 80pt;
    }
    .centerwrapper
    {
       margin: auto;
       width: 302pt;
    }
</style>

Also, make sure you have a closing quote on your <div class = "container"> there. The code you pasted is missing one.

Answered By - womp