it-roy-ru.com

Как я могу центрировать 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;
}

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

93
user2142709

Вам необходимо установить ширину контейнера. (auto не будет работать)

#container {
    width: 640px; /*can be in percentage also.*/
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

Ссылка CSS на MDN объясняет все это.

Проверьте эти ссылки

Обновить - В действии @ jsFiddle

80
ShuklaSannidhya

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

27
Jeremiah

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

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>
13
iraj jelodari

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

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

margin-top: -100px;
margin-left: -100px;
}
11
Zilberman Rafael

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

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

как это  

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

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

4
Vish

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

text-align: center;

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

display: inline-block;

Это должно сработать.

4
Arman P.

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

#container {
  width: 400px;
}
3
Jason Sears
#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

3
Web Designer cum Promoter

вот решение 

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

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

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 находится во встроенном блоке, потому что это в состоянии строки. Любой вопрос?

3
Bhojendra Rauniyar

попробуйте получить position:relative;in #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;
}

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

2
jhunlio

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

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

https://jsfiddle.net/u3Ln0hm4/

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

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

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

1
Bogdan Rybak

Я думаю, это будет работать нормально, хотя вам может понадобиться сбросить "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;
}
1
Praveen Dabral
.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, который должным образом поддерживает вертикальное выравнивание. Просто установите высоту ребенка, поле авто и среднюю вертикальную ориентацию, и это будет работать. Это самое простое решение, которое я знаю.

1
Joseph Myers

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

1
Sandeep Pattanaik

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

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

1
pzin

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

1
golchha21

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

http://jsfiddle.net/XUxEC/

1
btevfik

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

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

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

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

Вы должны назначить ширину 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

1
AndreaRivadossi

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

text-align: center; 

в #main_content 

1
LRA
* {
  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;
}  
0
Yarbrough lu

сделать 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>
0
Tauphik Ahamad