Using css to keep elements centered - html

Question

I'm dynamically adding select dropdowns with jquery into a div. I would like to begin with the div centered and then as the new dropdowns are added to move out from the center outwards.
Here is the CSS for the divs:
#pageMiddle{
width:940px;
margin:0 auto;
text-align: left;
position:relative;
}
#searchBar{
background: red;
width:500px;
margin: 0 auto;
}
#searchwrapper{
width:850px;
background: blue;
}
#searchwrapper form {
display:inline ;
margin: 0 auto;
}
and the actual HTML:
<div id="pageMiddle">
<div id="holder">
<div id="searchBar">
<div id="searchwrapper">
<form name="search_input">
I am looking for a
<div id="sBar1" style="display:inline;">
<select id="search_level" class="selectSearchBar" name="search_level">
<?php echo "<option>Level</option>";
while($row = mysqli_fetch_array($result_level, MYSQLI_ASSOC)){
echo "<option value=".$row['id'].">".$row['level']."</option>";
}?>
</select>
</div>
<div id="sBar2" class="selectSearchBar"></div>
<div id="sBar3" class="selectSearchBar"></div>
tutor in
<input type=text class="searchbox" id="location" value="Location"/>
<input type=image src="images/search_icon.png " class="searchbox_submit" name="searchbox_submit" onclick="searchLocations()" value=""></form>
</div>
</div>
</div>
</div>

Answer 1

I assume you mean something like this?
Notice the blue section is centered in the red section. This was done with the table display, which allows something of indefinite size to be centered via automatic margins. Otherwise, it must be a block element and have a definite size.
#searchwrapper
{
display: table;
margin: 0 auto;
}

Answer 2

<?php echo "<option style="text-align:center;">Level</option>";
while($row = mysqli_fetch_array($result_level, MYSQLI_ASSOC)){
echo "<option value=".$row['id'].">".$row['level']."</option>";
}?>
Let me know if this works please.