皮肤那种猫的六种方法：

Question

当我尝试将div块“产品”居中时，我遇到了问题，因为我事先并不知道div宽度。有人有解决方案吗？

更新：我遇到的问题是我不知道我会展示多少产品，我可以有1个，2个或3个产品，如果它是固定数字我可以居中，因为我知道宽度如果内容是动态的，我只是不知道怎么做。

.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>

Answer 1

2015年2月27日更新：我的原始答案一直在投票，但现在我通常使用@ 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;
}

JSFiddle

这里的想法是你包含你想要以两个div为中心的内容，一个是外部的，一个是内部的。您可以浮动两个div，使其宽度自动缩小以适合您的内容。接下来，您将外部div的右侧边缘放置在容器的中心位置。最后，你将内部div的相对方向相对定位为自己宽度的一半（实际上是外部div的宽度，但它们是相同的）。最终将内容集中在它所在的任何容器中。

如果您依赖“产品”内容来确定“product_container”的高度，可能最后需要空div。

Answer 2

带有'display：block'的元素（默认情况下为div）的宽度由其容器的宽度决定。您不能使块的宽度取决于其内容的宽度（缩小到适合）。

（除了CSS 2.1中'浮动：左/右'的块，但这对于居中没有用。）

您可以将'display'属性设置为'inline-block'，将块转换为可以由其父级text-align属性控制的缩小到适合对象，但浏览器支持不稳定。如果你想这样做，你可以通过使用黑客（例如，参见-moz-inline-stack）来摆脱它。

另一种方法是桌子。如果您的列的宽度实际上无法事先知道，则可能需要这样做。我无法从示例代码中确切地告诉您要做什么 - 那里没有任何显而易见的需要缩小到适合的块 - 但是可能会考虑产品列表表格

[PS。永远不要在网络上使用'pt'来表示字体大小。如果你真的需要固定大小的文本，'px'会更可靠，否则像'％'这样的相对单位会更好。并且“明确：ccc两者” - 一个错字？]

.center{
   text-align:center; 
}

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

JSFiddle

Answer 3

大多数浏览器都支持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 table support vs flexbox support），但此方法还允许许多其他内容，并且是针对此类行为的专用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>

Answer 4

皮肤那种猫的六种方法：

按钮一：类型为display: block的任何内容都将采用完整的父级宽度。（除非与float或display: flex父母合并）。真正。不好的例子。

按钮2：前往display: inline-block将导致自动（而不是完整）宽度。然后，您可以使用包装块上的text-align: center 进行居中。 可能是最简单，最广泛兼容的，甚至是“老式”浏览器......

.wrapTwo
  text-align: center;
.two
  display: inline-block; // instantly shrinks width

按钮3： 无需在包装上放任何东西。所以也许这是最优雅的解决方案。也垂直工作。（浏览器对transtlate的支持最近是good enough (≥IE9) ......）。

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

顺便说一句：这也是垂直居中未知高度块的好方法（与绝对定位有关）。

按钮4： 绝对定位。只需确保在包装器中保留足够的高度，因为没有其他人（无论是clearfix还是隐含......）

.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： float（它还将块级元素带到动态宽度）和相对移位。虽然我永远不会在野外看到这一点。也许有缺点...

.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

→ full source code (stylus syntax)

Answer 5

我找到了一个更优雅的解决方案，结合“内联块”以避免使用浮动和hacky clear：两者。它仍然需要嵌套的div，这不是非常语义，但它只是有效......

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

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

希望它有所帮助！

Answer 6

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

如果目标元素是绝对定位的，您可以通过将其向一个方向（left: 50%）移动50％然后在相反方向（transform:translateX(-50%)）将其转换50％来居中。这不会定义目标元素的宽度（或使用width:auto）。父元素的位置可以是静态，绝对，相对或固定。

Answer 7

默认情况下，div元素显示为块元素，因此它们具有100％的宽度，使它们无中心化。根据Arief的建议，您必须指定width，然后在指定auto时使用margin以div为中心。

或者，你也可以强制display: inline，但是你会有一些非常像span而不是div的东西，所以这不会很多感觉。

Answer 8

使用带有justify-content：center;

的css3 flexbox

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

Answer 9

这将使诸如有序列表或无序列表之类的元素或任何元素居中。只需使用带有outerElement类的Div包装它，并将内部元素赋予innerElement类。

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%;
}

Answer 10

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

如果您没有为“.product_container”提供“overflow：hidden”，则“外部中心”div将与其右侧的其他附近内容重叠。 “外部中心”右侧的任何链接或按钮都不起作用。尝试“外部中心”的背景颜色，以了解“溢出：隐藏”的需要

Answer 11

尝试这个新的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;
}

Answer 12

我找到了有趣的解决方案，我正在制作滑块并且必须将滑动控件居中，我做到了这一点并且工作正常。您还可以向父项添加相对位置并将子项位置垂直移动。看看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>

Answer 13

Mike M. Lin's answer

的轻微变化

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

这是源于这篇文章 - ＆gt; 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页边距。更糟糕的是，即使内容很好地适应屏幕尺寸，您也会获得整个页面的垂直滚动条。

Answer 14

执行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>

Answer 15

在旧浏览器中有效的简单修复（但确实使用表，并且需要设置高度）：

<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>

Answer 16

<style type="text/css">
.container_box{
    text-align:center
}
.content{
    padding:10px;
    background:#ff0000;
    color:#ffffff;

}

使用span而不是内部div

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

Answer 17

我知道这个问题已经过时了，但我正在努力解决这个问题。非常类似于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>

另请参阅：Center inline-blocks with dynamic width in CSS

Answer 18

蹩脚的修复，但它确实有用......

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>

Answer 19

我担心没有明确指定宽度的唯一方法是使用（喘气）表。

Answer 20

我的解决方案是：

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

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

Answer 21

这是在div内居中放置任何不知道元素内部宽度的中心的方法。

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

Answer 22

将此css添加到product_container类

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

没有宽度的div块居中

22 个答案:

皮肤那种猫的六种方法：

→ full source code (stylus syntax)