добавьте этот CSS в свой класс product_container

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

По умолчанию элементы div отображаются как блочные, поэтому они имеют 100% ширину, что делает их центрирование бессмысленным. Как было предложено Arief, вы должны указать width, и затем вы можете использовать auto при указании margin для центрирования div.

В качестве альтернативы вы также можете принудительно использовать display: inline, но тогда у вас будет что-то, что в значительной степени ведет себя как span вместо div, так что это не имеет большого смысла.

Боюсь, что единственный способ сделать это без явного указания ширины - это использовать (ахнуть) таблицы.

Элемент с «display: block» (как div по умолчанию) имеет ширину, определяемую шириной его контейнера. Вы не можете сделать ширину блока зависимой от ширины его содержимого (сжатие по размеру).

(За исключением блоков, которые имеют «float: left / right» в CSS 2.1, но это бесполезно для центрирования.)

Вы можете установить для свойства «display» значение «inline-block», чтобы превратить блок в объект с уменьшенным размером, которым можно управлять с помощью свойства text-align его родительского элемента, но поддержка браузером неоднородна. В большинстве случаев вы можете избежать неприятностей, используя хаки (например, см. -Moz-inline-stack), если вы хотите пойти по этому пути.

Другой путь - столы. Это может быть необходимо, когда у вас есть столбцы, ширина которых действительно не может быть известна заранее. Я не могу точно сказать, что вы пытаетесь сделать из примера кода - там нет ничего очевидного, что необходимость превратилось бы в блок с усадкой, - но список продуктов можно было бы считать табличным.

[PS. никогда не используйте "pt" для размеров шрифта в Интернете. «Px» более надежен, если вам действительно нужен текст фиксированного размера, в противном случае лучше использовать относительные единицы, такие как «%». И «ясно: 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>

Обновление 27 февраля 2015 г .: За мой исходный ответ постоянно голосуют, но теперь я обычно использую подход @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, но они одинаковы). В конечном итоге это центрирует контент в том контейнере, в котором он находится.

Вам май нужен этот пустой div в конце, если вы зависите от содержимого вашего «продукта» при определении высоты для «product_container».

Я нашел более элегантное решение, объединив "inline-block", чтобы избежать использования float и хакерского clear: и то, и другое. Он по-прежнему требует вложенных div, что не очень семантично, но просто работает ...

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

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

Надеюсь, это поможет!

Небольшое изменение на Ответ Майка М. Лина

Если вы добавите 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 margin до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", div "external-center" будет перекрывать другое соседнее содержимое справа от него. Любые ссылки или кнопки справа от «внешнего центра» работать не будут. Попробуйте цвет фона для «внешний центр», чтобы понять необходимость «переполнения: скрыто».

Это будет центрировать такой элемент, как упорядоченный список или неупорядоченный список, или любой элемент. Просто оберните его в Div с классом outerElement и дайте внутреннему элементу класс 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%;
} 

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

Я нашел интересное решение, я делал слайдер, и мне нужно было центрировать элементы управления слайдером, и я сделал это и отлично работает. Вы также можете добавить относительное положение к родительскому и переместить дочернее положение по вертикали. Взгляните 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>

Большинство браузеров поддерживают правило CSS display: table;. Это хороший трюк для центрирования 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;
}

шесть способов снять шкуру с кошки:

Кнопка первая: что-либо типа 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 в наши дни достаточно хорошо (≥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: 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

→ полный исходный код (синтаксис стилуса)

мое решение было:

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