Как я могу центрировать div внутри другого div?

У меня проблема. У меня есть html-код:

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

css вот так:

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

#container {
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

Я полагаю, что контейнер # будет центрирован в #main_content. Однако это не так. Я просто хочу узнать причину и как ее сосредоточить.

ОТВЕТЫ

Ответ 2

Технически ваш внутренний 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;
 }

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

Ответ 3

Еще один интересный способ: fiddle

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>

Ответ 4

Теперь просто определите свой

#main_content text-align:center и укажите #container display:inline-block;

, как это показано

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

Ответ 5

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

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

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

Ответ 6

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

Ответ 7

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

#container {
  width: 400px;
}

Ответ 8

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

text-align: center;

в вашу родительскую декларацию css контейнера. И следующий для дочернего контейнера:

display: inline-block;

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

Ответ 9

вот решение

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

Ответ 10

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

попробуйте это проверить. live check на jsfiddle

Ответ 11

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

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 находится в inline-block coz, это в состоянии строки. Любой вопрос?

Ответ 12

попытайтесь получить 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;
}

работает демо

Ответ 13

Вот новый способ легкого центрирования вашего 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;
}

Ответ 14

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

Ответ 15

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

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

Ответ 16

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

Ответ 17

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

http://jsfiddle.net/XUxEC/

Ответ 18

Сделайте 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/

Ответ 19

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

text-align: center;

to #main_content

Ответ 20

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

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

Ответ 21

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

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

Ответ 22

Это отлично работает, я думаю, хотя вам может понадобиться reset "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;
}

Ответ 24

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

Ответ 25

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

https://jsfiddle.net/u3Ln0hm4/

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

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

Ответ 26

чтобы сделать 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>