Question

我有以下CSS / Markup

.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将包含未知数量的tile div。是否有一种方法可以居中res-tile-wrap或给出它居中的外观，因为我不想给它一个特定的宽度，因为我希望每行有多少个像屏幕允许的那样。

Answer 1

对于内部div，您可以使用display:inline-block代替float:left，因为内部内容的行为类似于内联元素，您可以使用res-tile-wrap将其置于容器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;
}

你根本不需要职位：亲戚或漂浮。使图块显示：内联块，因此它们的行为类似于＆＃34; text＆＃34;和text-align：集中容器。

Answer 3

虽然@Noyulysses的答案适用于沿着X轴居中（我假设这是你的问题所要求的），几乎不可能将一个元素垂直和水平居中。未指定宽度和高度而不使用JavaScript。

您可以使用以下内容将某些内容置于屏幕的正中心位置：

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

我从另一个SO答案得到了这个功能......我现在找不到它，但是当我这样做时，我会链接到它。

<强> DEMO

Answer 4

要将未知宽度的div居中，只需将display: table应用于margin: 0 auto。

DEMO http://jsfiddle.net/3SNm8/8/

.res-tile-wrap {
    padding-bottom:25px;
    display: table;
    margin: 0 auto;
}

Answer 5

您有两种简单的方法：

1）显示：表格： DEMO

html{
    display:table;
    height:100%;
    margin:auto;
}
body  {
   display:table-cell;
    vertical-align:middle;
}

2）显示：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;
}

手型：未经测试

Answer 7

另一个选项http://jsfiddle.net/3SNm8/12/

body {
    text-align:center;
}
.res-tile-wrap {
    padding-bottom:25px;
    margin:0 auto;
    display:inline-block;
}

如何集中这个未知大小的容器？

7 个答案: