没有宽度的div块居中

我有一个问题，当我试图中心的div块“产品”，因为我不知道提前div宽度。有人有办法吗?

更新:我有问题是我不知道有多少产品我将显示，我可以有1、2或3个产品，我可以中心他们，如果这是一个固定的数字，因为我知道父div的宽度，我只是不知道如何做的时候，内容是动态的。

.product_container {
text-align: center;
height: 150px;
}


.products {
height: 140px;
text-align: center;
margin: 0 auto;
clear: ccc both;
}
.price {
margin: 6px 2px;
width: 137px;
color: #666;
font-size: 14pt;
font-style: normal;
border: 1px solid #CCC;
background-color:	#EFEFEF;
}
<div class="product_container">
<div class="products" id="products">
<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>


<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>


<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
</div>
</div>

192055 次浏览
小开

将这个CSS添加到product_container类中

    margin: 0px auto;
padding: 0px;
border:0;
width: 700px;
小开

默认情况下，div元素显示为块元素，因此它们有100%的宽度，使得居中没有意义。正如Arief所建议的，你必须指定width，然后你可以在指定margin时使用auto，以便将div居中。

或者，你也可以强制display: inline，但这样你就会得到一个非常像span而不是div的东西，所以这没有什么意义。

小开

恐怕唯一不显式指定宽度的方法是使用(gasp)表。

小开

带有' display: block '(默认为div)的元素的宽度由其容器的宽度决定。你不能让一个块的宽度依赖于它的内容的宽度(缩小到适合)。

(除了CSS 2.1中' float: left/right '的块，但这对居中没有用处。)

你可以将“display”属性设置为“inline-block”，将一个块转换为一个可以由其父元素的text-align属性控制的收缩对象，但浏览器的支持参差不齐。你可以通过使用黑客(例如。如果你想这样做，请参阅-moz-inline-stack)。

另一种方法是桌子。当您的列的宽度确实无法提前知道时，这可能是必要的。我不能从示例代码中真正说出你想做什么——那里没有任何明显的东西会需要一个缩小到适合的块——但产品列表可能被认为是表格。

[附注:永远不要在网络上使用' pt '来表示字体大小。如果确实需要固定大小的文本，' px '更可靠，否则像' % '这样的相对单位更好。还有“clear: ccc both”——拼写错误?］

.center{
text-align:center;
}


.center > div{ /* N.B. child combinators don't work in IE6 or less */
display:inline-block;
}

JSFiddle

小开

糟糕的修复，但它确实有效…

CSS:

#mainContent {
position:absolute;
width:600px;
background:#FFFF99;
}


#sidebar {
float:left;
margin-left:610px;
max-width:300;
background:#FFCCCC;
}
#sidebar{




text-align:center;
}

HTML:

<center>
<table border="0" cellspacing="0">
<tr>
<td>
<div id="mainContent">
1<br/>
<br/>
123<br/>
123<br/>
123<br/>
</div><div id="sidebar"><br/>
</div></td>
</tr>
</table>
</center>
小开

我最初的答案一直被投票，但现在我通常用@bobince的方法代替。

.child { /* This is the item to center... */
display: inline-block;
}
.parent { /* ...and this is its parent container. */
text-align: center;
}

出于历史目的，我原来的帖子是:

您可能想尝试这种方法。

<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
</div>
</div>
<div class="clear"/>
</div>

下面是匹配的样式:

.outer-center {
float: right;
right: 50%;
position: relative;
}
.inner-center {
float: right;
right: -50%;
position: relative;
}
.clear {
clear: both;
}

< a href = " http://jsfiddle.net/6350btvd/3/ " > JSFiddle < / >

这里的想法是，您将内容包含在两个div中，一个外部div和一个内部div。浮动两个div，使它们的宽度自动缩小以适应您的内容。接下来，将外部div的右边缘相对放置在容器的中心。最后，你相对地定位内部div的相反方向的一半自己的宽度(实际上是外部div的宽度，但他们是相同的)。最终将内容集中到它所在的容器中。

如果你依赖“product”内容来调整“product_container”的高度，你五月需要在结尾使用空div。

小开

我找到了一个更优雅的解决方案，结合“内联块”来避免使用float和俗气的clear:两者。它仍然需要嵌套的divs，这不是很语义，但它只是工作…

div.outer{
display:inline-block;
position:relative;
left:50%;
}


div.inner{
position:relative;
left:-50%;
}

希望能有所帮助!

小开

Mike M. Lin的回答是的轻微变化

如果将overflow: auto;(或hidden)添加到div.product_container，则不需要div.clear。

这是派生自这篇文章-> http://www.quirksmode.org/css/clearing.html

下面是修改后的HTML:

<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
</div>
</div>
</div>

这里是修改后的CSS:

.product_container {
overflow: auto;
/* width property only required if you want to support IE6 */
width: 100%;
}


.outer-center {
float: right;
right: 50%;
position: relative;
}


.inner-center {
float: right;
right: -50%;
position: relative;
}

原因，为什么没有div.clear更好(除了空元素感觉不对)是Firefox过度热心的边距赋值。

例如，如果你有这样的html:

<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
</div>
</div>
<div style="clear: both;"></div>
</div>
<p style="margin-top: 11px;">Some text</p>

然后，在Firefox(写作时为8.0)中，你会看到11px边距之前 product_container。更糟糕的是，即使内容很好地符合屏幕尺寸，整个页面也会出现一个垂直滚动条。

小开

试试这个新的css和标记

下面是修改后的HTML:

<div class="product_container">
<div class="products" id="products">
<div id="product_15" class="products_box">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15" class="products_box">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15" class="products_box">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
</div>

这里是修改后的CSS:

<pre>
.product_container
{
text-align:    center;
height:        150px;
}


.products {
left: 50%;
height:35px;
float:left;
position: relative;
margin: 0 auto;
width:auto;
}
.products .products_box
{
width:auto;
height:auto;
float:left;
right: 50%;
position: relative;
}
.price {
margin:        6px 2px;
width:         137px;
color:         #666;
font-size:     14pt;
font-style:    normal;
border:        1px solid #CCC;
background-color:   #EFEFEF;
}

小开

在旧浏览器中工作的简单修复(但使用表格，并需要设置高度):

<div style="width:100%;height:40px;position:absolute;top:50%;margin-top:-20px;">
<table style="width:100%"><tr><td align="center">
In the middle
</td></tr></table>
</div>
小开 
<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
</div>
</div>
<div class="clear"></div>
</div>


.outer-center
{
float: right;
right: 50%;
position: relative;
}
.inner-center
{
float: right;
right: -50%;
position: relative;
}
.clear
{
clear: both;
}


.product_container
{
overflow:hidden;
}

如果你不提供"overflow:hidden"为"。Product_container”，“outer-center”div将与它右边的其他附近内容重叠。任何链接或按钮的右边“外中心”不会工作。尝试“outer-center”的背景色来理解“overflow:hidden”的需求

小开

将一个元素居中，如有序列表、无序列表或任何元素。 只需用类为outerElement的Div包装它，并给内部元素类为innerElement。< / p >

outerelement类适用于IE、旧Mozilla和大多数较新的浏览器。

 .outerElement {
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
position: relative;
left: 50%;
}


.innerElement {
position: relative;
left: -50%;
}
小开 
<style type="text/css">
.container_box{
text-align:center
}
.content{
padding:10px;
background:#ff0000;
color:#ffffff;
< p >}

使用span代替内部div

<div class="container_box">
<span class="content">Hello</span>
</div>
小开

我发现了一个有趣的解决方案，我正在制作滑块，必须将滑块控制居中，我这样做，工作很好。您也可以添加相对位置到父和移动子位置垂直。来看看http://jsfiddle.net/bergb/6DvJz/

CSS:

#parent{
width:600px;
height:400px;
background:#ffcc00;
text-align:center;
}


#child{
display:inline-block;
margin:0 auto;
background:#fff;
}

HTML:

<div id="parent">
<div id="child">voila</div>
</div>
小开

大多数浏览器都支持display: table; CSS规则。这是一个在容器中居中div的好技巧，无需添加额外的HTML，也无需对容器应用约束样式(如text-align: center;将所有其他内联内容居中)，同时保持所包含div的动态宽度:

HTML:

<div class="container">
<div class="centered">This content is centered</div>
</div>

CSS:

.centered { display: table; margin: 0 auto; }


.container {
background-color: green;
}
.centered {
display: table;
margin: 0 auto;
background-color: red;
}
<div class="container">
<div class="centered">This content is centered</div>
</div>

更新(2015-03-09):

现在正确的方法实际上是使用flexbox规则。浏览器的支持有点受限(CSS表支持 vs flexbox支持)，但此方法也允许许多其他事情，并且是针对这种类型行为的专用CSS规则:

HTML:

<div class="container">
<div class="centered">This content is centered</div>
</div>

CSS:

.container {
display: flex;
flex-direction: column; /* put this if you want to stack elements vertically */
}
.centered { margin: 0 auto; }


.container {
display: flex;
flex-direction: column; /* put this if you want to stack elements vertically */
background-color: green;
}
.centered {
margin: 0 auto;
background-color: red;
}
<div class="container">
<div class="centered">This content is centered</div>
</div>

小开

我知道这个问题很老了，但我正在尝试。非常类似于bobince的答案，但有工作代码示例。

使每个产品都成为一个内联块。将容器的内容居中。完成了。

http://jsfiddle.net/rgbk/6Z2Re/

<style>
.products{
text-align:center;
}


.product{
display:inline-block;
text-align:left;


background-image: url('http://www.color.co.uk/wp-content/uploads/2013/11/New_Product.jpg');
background-size:25px;
padding-left:25px;
background-position:0 50%;
background-repeat:no-repeat;
}


.price {
margin:        6px 2px;
width:         137px;
color:         #666;
font-size:     14pt;
font-style:    normal;
border:        1px solid #CCC;
background-color:   #EFEFEF;
}
</style>




<div class="products">
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
</div>

参见:CSS中具有动态宽度的内联块居中

小开

做display:table;和设置margin为auto

重要代码:

.relatedProducts {
display: table;
margin-left: auto;
margin-right: auto;
}

不管你现在有多少个元素，它都会自动在中心对齐

代码片段中的示例:

. 
.relatedProducts {
display: table;
margin-left: auto;
margin-right: auto;
}
a {
text-decoration:none;
}
<div class="row relatedProducts">
<div class="homeContentTitle" style="margin: 100px auto 35px; width: 250px">Similar Products</div>
					

<a href="#">test1 </a>
<a href="#">test2 </a>
<a href="#">test3 </a>
</div>

小开 
<div class="outer">
<div class="target">
<div class="filler">
</div>
</div>
</div>


.outer{
width:100%;
height: 100px;
}


.target{
position: absolute;
width: auto;
height: 100px;
left: 50%;
transform: translateX(-50%);
}


.filler{
position:relative;
width:150px;
height:20px;
}

如果目标元素是绝对定位的，你可以将它在一个方向上移动50% (left: 50%)，然后将它在相反的方向上转换50% (transform:translateX(-50%))。这无需定义目标元素的宽度(或使用width:auto)。父元素的位置可以是静态的、绝对的、相对的或固定的。

小开

使用css3 flexbox与justify-content:center;

    <div class="row">
<div class="col" style="background:red;">content1</div>
<div class="col" style="">content2</div>
</div>




.row {
display: flex; /* equal height of the children */
height:100px;
border:1px solid red;
width: 400px;
justify-content:center;
}
小开

剥猫皮的六种方法:

></a></p> <p><strong>按钮:</strong>任何类型的<code>display: block</code>将假定完整的父类宽度。(除非与<code>float</code>或<code>display: flex</code>父类结合)。真实的。不好的例子。</p> <p><strong>按钮2:</strong>为<code>display: inline-block</code>将导致自动(而不是完全)宽度。然后你可以使用<code>text-align: center</code> <em>在包装块上</em>居中。<strong>可能是最简单，最广泛兼容的浏览器，即使是“老式”浏览器…</strong></p> <pre><code>.wrapTwo text-align: center; .two display: inline-block; // instantly shrinks width </code></pre> <p><强>按钮3:</strong> 不需要在包装上放任何东西。也许这是最优雅的解决方案。也适用于垂直方向。(现在浏览器对翻译的支持是<a href=足够好(≥IE9)…) 

position: relative;
display: inline-block; // instantly shrinks width
left: 50%;
transform: translateX(-50%);

顺便说一句:这也是垂直定心未知高度的块的好方法(与绝对定位有关)。

<强>按钮4: 绝对定位。只要确保在包装器中保留足够的高度，因为没有其他人会(既不是clearfix也不是implicit…)

.four
position absolute
top 0
left 50%
transform translateX(-50%)
.wrapFour
position relative // otherwise, absolute positioning will be relative to page!
height 50px // ensure height
background lightgreen // just a marker

<强>按钮5: 浮动(它也为块级元素带来动态宽度)和相对移位。虽然我在野外见过这种情况。

.wrapFive
&:after // aka 'clearfix'
content ''
display table
clear both


.five
float left
position relative
left 50%
transform translateX(-50%)

更新: 按钮6: 现在，你也可以使用flex-box。注意，样式应用于居中对象的包装器 

.wrapSix
display: flex
justify-content: center

< a href = " https://codepen.io/fnocke/pen/NjeVgg?编辑器=1100" rel="noreferrer">→完整源代码(触笔语法) .

小开

我的解决方案是:

.parent {
display: flex;
flex-wrap: wrap;
}


.product {
width: 240px;
margin-left: auto;
height: 127px;
margin-right: auto;
}
小开

这是一种将div中任何内容居中的方法，而不知道元素的内部宽度。

#product_15{
position: relative;
margin: 0 auto;
display: table;
}
.price, img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

提交答案