How can I center a group of objects together in HTML with CSS?

Question

I have a group of objects ( divs ) that are small squares that I can move anywhere (there's a JavaScript function to move then). Those squares are all together and form a figure. So I have that figure centered by the CSS: " left: 600px " but now I'm trying to make a more responsive design for my page and I started to percents but I encountered 2 problems.

1. If I add the percentage to all the objects individually, when I zoom in or zoom out or when i resize my page they become more closer of far away from each other.

2. If I create a div including all the objects and then add " left:50% " when I click to move them they go instantanially another 50% to left. So my mouse is this -> () [spacespacescpace] / \\ <- and this the object, but I'm still selecting that object. So that's weird...

This is the HTML:

<div id="container">
<div class="VEPart" id="me2"></div>
<script type="text/javascript">
    jcl.LoadBehaviour("me2", MoverBehaviour);
</script>


<div class="VEPart" id="me3"></div>
<script type="text/javascript">
    jcl.LoadBehaviour("me3", MoverBehaviour);
</script>

<div class="VEPart" id="me4"></div>
<script type="text/javascript">
    jcl.LoadBehaviour("me4", MoverBehaviour);
</script>   

<div class="VEPart" id="me5"></div>
<script type="text/javascript">
    jcl.LoadBehaviour("me5", MoverBehaviour);
</script></div>

Here's the CSS:

#me2
{
  content:url("some image");
  top:401px;
  left:0px;
  z-index:5;  
}

#me3
{
  content:url("some image");
  top:400px;
  left:-58px;
  z-index:5;    
}

#me4
{
  content:url("some image");
  top:400px;
  left:58px;
  z-index:5;    
}

#me5
{
  content:url("some image");
  top:500px;
  left:-57px;
  z-index:5;    
}

Answer 1

Try setting the position property to absolute and using the percentage. It sounds like you are having a problem with relative positioning.

#me2
{
  content:url("some image");
  position:absolute;
  top:401px;
  left:50%;
  z-index:5;  
}

http://www.w3schools.com/cssref/pr_class_position.asp

Answer 2

provide a style for all div.. Just put this in your css

div {
 margin-left: 20%
}