How to center this container of unknown size? - html

Question

I have the following CSS/Markup
http://jsfiddle.net/3SNm8/
.res-tile-wrap {padding-bottom:25px;}
.res-tile
{
border:solid 1px #CCC;
width:36px; height:34px; margin: 25px 0 0 25px; float:left; position:relative;
}
<div class="res-tile-wrap">
<div class="res-tile">1</div>
<div class="res-tile">2</div>
<div class="res-tile">...etc</div>
</div>
res-tile-wrap will contain an unknown number of tile divs. Is there a way to center res-tile-wrap or give the appearance that it is centered given that I do not want to give it a specific width because I want as many tiles per row as the screen will allow.

Answer 1

For the inner divs you can use display:inline-block instead of float:left and as inner content is behaving like an inline element you can center it in the container res-tile-wrap with text-align:center :
res-tile-wrap {
padding-bottom:25px;
text-align:center;
}
.res-tile{
border:solid 1px #CCC;
width:36px; height:34px; margin: 25px 0 0 25px;
display:inline-block;
}
Example with 4 inner divs
Example with 11 inner divs

Answer 2

.res-tile-wrap{text-align:center}
.res-tile
{
border:solid 1px #CCC;
width:36px; height:34px; margin: 25px 0 0 25px;
display:inline-block;
}
You don't need position:relative or float at all. Make tiles display: inline-block, so they will behave like "text" and text-align:center the container.

Answer 3

While #Noyulysses answer works well for centering along the X-axis (and I'm assuming that's what your question was asking about) it's nearly impossible to both vertically and horizontally center an element with an unspecified width and height without using JavaScript.
You can center something in the exact center of the screen with something like this:
jQuery.fn.center = function ()
{
this.css("position","fixed");
this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
return this;
}
$('.downBig').center();
$(window).resize(function(){
$('.downBig').center();
});
I got this function from another SO answer somewhere... I can't find it at the moment but when I do I'll link to it.
DEMO

Answer 4

To center a div of an unknown width simply apply display: table to it, with margin: 0 auto.
DEMO http://jsfiddle.net/3SNm8/8/
.res-tile-wrap {
padding-bottom:25px;
display: table;
margin: 0 auto;
}

Answer 5

You have 2 easy ways :
1) display:table : DEMO
html{
display:table;
height:100%;
margin:auto;
}
body {
display:table-cell;
vertical-align:middle;
}
2) display:flex; : DEMO
html, body{
display:flex;
flex-direction:column;
height:100%;
align-items:center;
}
body > div {
margin:auto;
}

Answer 6

.res-tile-wrap
{
width: 100%;
margin-left:auto;
margin-right:auto;
text-align: center;
}
hand type: untested

Answer 7

Another option http://jsfiddle.net/3SNm8/12/
body {
text-align:center;
}
.res-tile-wrap {
padding-bottom:25px;
margin:0 auto;
display:inline-block;
}