технически, ваш внутренний DIV (#container)и центрироваться. Причина, по которой вы не можете сказать, потому что с CSS width: auto свойство внутренний DIV расширяется до той же ширины, что и его родитель.

смотрите эту скрипку:http://jsfiddle.net/UZ4AE/

#container {
    width: 50px;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    background-color: red;
}

в этом примере, я просто задать ширину #container до 50px и установите фон в red, так что вы можете увидеть, что он центрирован.

Я думаю, реальный вопрос: "как мне центрировать элементы по горизонтали с помощью CSS?"и ответ (барабанная дробь, пожалуйста): это зависит!

Я не буду делать полный перефразировать мириады способов центрировать вещи с помощью CSS, когда W3Schools делает это так красиво здесь:http://www.w3schools.com/css/css_align.asp но основная идея заключается в том, что для элементов уровня блока вы просто указываете нужную ширину и устанавливаете левое и правое поля auto.

.center {
    margin-left: auto;
    margin-right: auto;
    width: 50px;
 }

обратите внимание: этот ответ применим только к элементам уровня блока! Чтобы разместить встроенный элемент, вам нужно будет использовать text-align: center свойство на первом родительском блоке.

еще один интересный способ: скрипка

css

.container{
    background:yellow;
    width: %100;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.centered-div{
    width: 80%;
    height: 190px;
    margin: 10px;
    padding:5px;
    background:blue;
    color:white;
}

html

<div class="container">
    <div class="centered-div">
        <b>Enjoy</b>
    </div>
</div>

вы можете центрировать float div с помощью этого небольшого кода:

#div {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;

margin-top: -100px;
margin-left: -100px;
}

теперь просто определите ваш

#main_contenttext-align:center и определить#containerdisplay:inline-block;

вот так

#main_content{
text-align:center;
}
#container{
display:inline-block;
vertical-align:top;
}

попробуйте добавить

text-align: center;

к родительской декларации CSS контейнера. И вслед за дочерним контейнером:

display: inline-block;

он должен сделать трюк.

Он будет работать, давая # container div width: 80% [любая ширина меньше основного содержимого и дала в%, чтобы она хорошо управлялась как слева, так и справа] и давая margin:0px auto; или margin:0 auto; [оба работают нормально].

Я бы попытался определить более конкретную ширину, для начала. Трудно что-то, что уже охватывает всю ширину:

#container {
  width: 400px;
}

вот решение

 #main_content {
background-color: #2185C5;
height: auto;
margin: 0 auto;
min-height: 500px;
position: relative;
width: 800px;
 }

#main_content {    
    width: 400px; margin: 0 auto;
    min-height: 300px;
    height: auto;
    background-color: #2185C5;
    position: relative;
}

#container {
    width: 50%;
    height: auto;
    margin: 0 auto;background-color: #ccc;
    padding: 10px;
    position: relative;
}

попробуйте это проверить ОК. живая проверка на jsfiddle

может быть, вы хотите, как это: демо

html...

<div id="main_content">
<div id="container">vertical aligned text<br />some more text here
</div>
</div>

css..

#main_content{
width: 500px; 
height: 500px; 
background: #2185C5; 
display: table-cell; 
text-align: center; 
vertical-align: middle; 
}
#container{
width: auto; 
height: auto; 
background: white; 
display: inline-block; 
padding: 10px;
}

как? >>> в ячейке таблицы вертикальное выравнивание с серединой будет установлено на вертикально центрированный элемент и text-align: center; работает как горизонтальное выравнивание элемента. Заметил, Почему #container находится во встроенном блоке, потому что это в состоянии строки. Есть вопросы?

попробуйте получить position:relative;вы #container добавить точную ширину до #container

#main_content {
    top: 160px;
    left: 160px;
    width: 800px;
    min-height: 500px;
    height: auto;
    background-color: #2185C5;
    position: relative;
}

#container {
    width:600px;
    height: auto;
    margin:auto;
    padding: 10px;
}

работающего демо

вот новый способ легко центрировать div с помощью гибкого дисплея.

смотрите эту рабочую скрипку:https://jsfiddle.net/5u0y5qL2/

вот css:

.layout-row{
box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.layout-align-center-center{
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-grid-row-align: center;
  align-items: center;
  -webkit-align-content: center;
  align-content: center;
      -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

Это потому, что ширина вашего авто. Вы должны указать ширину, чтобы она была заметно центрирована. Ваш контейнер охватывает всю ширину #main_content. Вот почему он кажется не центрированным,

без Width он получит максимальную ширину, которую он может получить. Так что вы не можете видеть, что Div была сосредоточена.

#container 
{
  width: 50%;
  height: auto;
  margin: auto;
  padding: 10px;
  position: relative;
  background-color:black;  /* Just to see the different*/
}

использовать margin:0 auto; к ребенку div. Затем вы можете центрировать дочерний div внутри родительского div.

все это сказали, но я думаю, что это не повредит говорить снова. вам нужно установить width какое-то значение. здесь есть что-то более простое для понимания.

http://jsfiddle.net/XUxEC/

сделайте css таким образом...

#main_content {
    top: 160px;
    left: 160px;
    width: auto;
    min-height: 500px;
    height: auto;
    background-color: #2185C5;
    position: relative;
 }

#container {
    height: auto;
    width: 90%;
    margin: 0 auto;
    background-color: #fff;
    padding: 10px;
}

рабочий пример здесь -> http://jsfiddle.net/golchha21/mjT7t/

Если вы не хотите устанавливать ширину для #контейнер просто добавить

text-align: center; 

в #main_content

если вы устанавливаете width: auto для блочного элемента, то ширина будет 100%. Так что это действительно не имеет смысла auto значение здесь. Действительно то же самое для высоты, потому что по умолчанию любой элемент установлен на автоматическую высоту.

Итак, наконец-то ваш div#container на самом деле по центру, но он просто занимает всю ширину родительского элемента. Вы делаете центрирование правильно, вам нужно просто изменить ширину (если это необходимо), чтобы увидеть, что он действительно центрирован. Если вы хотите, чтобы центр вашего main_content #затем просто применить margin: 0 auto; на нем.

попробуйте это, если это выход, который вы хотите:

<div id="main_content" >
<div id="container">
</div>
</div>

#main_content {
background-color: #2185C5;
margin: 0 auto;
}

#container {
width: 100px;
height: auto;
margin: 0 auto;
padding: 10px;
background: red;
}

Это будет работать нормально я думаю, хотя вам может потребоваться сбросить "top: 200px;" в соответствии с вашими потребностями--

#main_content {
top: 160px;
left: 160px;
width: 800px;
min-height: 500px;
height: auto;
background-color: #2185C5;
position: relative;
border:2px solid #cccccc;
}

#container {
width: 100px;
height: 20px;;
margin: 0 auto;
padding-top: 10px;
position: relative;
top:200px;
border:2px solid #cccccc;
}

вы должны назначить ширину div, который вы хотите центрировать.

Такой:

#container {
    width: 500;
    margin: 0 auto;
    padding: 10px;
}

дополнительная информация и примеры по этим ссылкам:

http://www.w3schools.com/css/css_align.asp

http://www.w3schools.com/css/tryit.asp?filename=trycss_align_container

.parent {
width:500px;
height:200px;
border: 2px solid #000;
display: table-cell;
vertical-align: middle;
}
#kid {
width:70%; /* 70% of the parent*/
margin:auto;
border:2px solid #f00;
height: 70%;
}

Это очень хорошо решает проблему (проверено во всех новых браузерах), где Родительский div имеет class= "parent", а дочерний div имеет id="kid"

этот стиль центрируется как по горизонтали, так и по вертикали. Вертикальный центр может быть выполнен только с помощью сложных трюков-или путем создания родительской функции div в виде ячейки таблицы, которая является одним из единственных элементов в HTML, который правильно поддерживает вертикальное выравнивание. Просто установите высоту малыша, маржу авто и среднюю вертикаль выравнивание и оно будет работать. Это самое простое решение, которое я знаю.

я использовал следующий метод в нескольких проектах

https://jsfiddle.net/u3Ln0hm4/

.cellcenterparent{
  width: 100%;
  height: 100%;
  display: table;
}

.cellcentercontent{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

сделать div в центре. нет необходимости назначать ширину div.

рабочая демонстрация здесь..

http://jsfiddle.net/6yukdmwq/

.container{width:100%; height:500px;display:table;border:1px solid red;text-align:center;}
.center{display:table-cell;vertical-align:middle;}
.content{display:inline-block;text-align:center; border:1px solid green;}



<section class="container">
    <div class="center">
        <div class="content">
            <h1>Helllo Center Text</h1>
        </div>
    </div>
</section>

* {
  box-sizing: border-box;
}
#main_content {
    top: 160px;
    left: 160px;
    width: 800px;
    min-height: 500px;
    height: auto;
    background-color: #2185C5;
    position: relative;
}

#container {
    width: 50%;
    height: 50%;
    margin: auto;
    padding: 10px;
    position: absolute;
    border: 5px solid yellow;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}