Как горизонтально центрировать <div>?

Question

Как я могу горизонтально центрировать <div> внутри другого <div> с помощью CSS?

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Answer 1

Извините, но этот ребенок из 1990-х просто работал для меня:

<div id="outer">  
  <center>Foo foo</center>
</div>

Собираюсь ли я в ад за этот грех?

Answer 2

Это централизует ваш внутренний div по горизонтали и вертикали:

#outer{
    display: flex;
}
#inner{
    margin: auto;
}

Только для выравнивания по горизонтали, изменить

margin: 0 auto;

, а для вертикали изменить

margin: auto 0;

Answer 3

Основными атрибутами для центрирования div являются margin: auto и width: в соответствии с требованиями:

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}

Answer 4

#inner {
  display: table;
  margin: 0 auto;
}

<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

Answer 5

HTML:

<div id="outer">
  <div id="inner">
  </div>
</div>

CSS:

#outer{
  width: 500px;
  background-color: #000;
  height: 500px
}
#inner{
  background-color: #333;
  margin: 0 auto;
  width: 50%;
  height: 250px;
}

Fiddle .

Answer 6

Вы можете сделать это по-другому. Смотрите примеры ниже:

1. First Method
#outer {
   text-align: center;
   width: 100%;
}
#inner {
   display: inline-block;
}


2. Second method
#outer {
  position: relative;
  overflow: hidden;
}
.centered {
   position: absolute;
   left: 50%;
}

Answer 7

Вместо нескольких оболочек и / или автоматических полей мне подходит это простое решение:

<div style="top:50%; left:50%;
    height:100px; width:100px;
    margin-top:-50px; margin-left:-50px;
    background:url('lib/loading.gif') no-repeat center #fff;
    text-align:center;
    position:fixed; z-index:9002;">Loading...</div>

Он помещает div в центр представления (по вертикали и по горизонтали), размеры и корректирует по размеру, центрирует фоновое изображение (по вертикали и по горизонтали), центрирует текст (по горизонтали), и сохраняет div в виде и сверху содержимое. Просто поместите в HTML body и наслаждайтесь.

Answer 8

Просто просто Margin:0px auto:

#inner{
  display: block;
  margin: 0px auto;
  width: 100px;
}

<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>

Answer 9

Прежде всего: вам нужно дать ширину второму div:

Например:

HTML

<div id="outter">
    <div id="inner"Centered content">
    </div
</div>

CSS:

 #inner{
     width: 50%;
     margin: auto;
}

Обратите внимание, что если вы не укажете ширину, она займет всю ширину линии.

Answer 10

Я знаю, что немного опоздал с ответом на этот вопрос, и я не удосужился прочитать каждый ответ, так что может быть дубликатом. Вот мой дубль :

inner { width: 50%; background-color: Khaki; margin: 0 auto; }