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

Question

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

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

Answer 1

Я хотел ответить на это, поскольку заметил, что никто не упомянул метод calc. Используется для делителя, который вы центрируете, если вы знаете его ширину, скажем, 1200 пикселей, перейдите к:

.container {
    width:1200px;
    margin-left: calc(50% - 600px);
}

Таким образом, в основном это добавит левое поле в 50% минус половина известной ширины.

Answer 2

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

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%); 
  -o-transform: translate(-50%,-50%);
} 

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

Но, конечно, если вы хотите, чтобы он был выровнен по горизонтали, это может вам помочь.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  -moz-transform: translate(-50%,0); 
  -o-transform: translate(-50%,0);
} 

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

Answer 3

Самый известный способ, который широко используется и работает в многих браузерах , включая старые, использует margin, как показано ниже:

#parent {
  width: 100%;
  background-color: #cccccc;
}

#child {
  width: 30%; /*we need the width*/
  margin: 0 auto; /*this does the magic*/
  color: #ffffff;
  background-color: #000000;
  padding: 10px;
  text-align: center;
}

<div id="parent">
  <div id="child">I'm the child and I'm horizontally centered! My daddy is a greyish div dude!</div>
</div>

Запустите код, чтобы увидеть, как он работает, также есть 2 важные вещи, которые вы не должны забывать в своем CSS, когда пытаетесь центрировать этот путь: margin: 0 auto;, которые делают его центром деления, как хотелось бы, плюс забудь width о ребенке, иначе он не окажется в центре, как ожидалось!

Answer 4

Вы можете сделать это, используя гибкую коробку, ведь это хорошая техника в наши дни. Для использования flex-box вы должны предоставить display: flex; и align-items: center; вашему родителю или #outer элементу div. Код должен быть таким:

#outer {
  display: flex;
  align-items: center;
}

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

Это должно центрировать вашего ребенка или #inner div по горизонтали. Но вы не можете увидеть какие-либо изменения. Поскольку наш #outer div не имеет высоты или, другими словами, его высота установлена ​​на auto, поэтому он имеет ту же высоту, что и все его дочерние элементы. Поэтому после небольшого визуального оформления код результата должен выглядеть следующим образом:

#outer {
  height: 500px;
  display: flex;
  align-items: center;
  background-color: blue;
}

#inner {
  height: 100px;
  background: yellow;
}

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

Вы можете видеть, что #inner div теперь центрирован. Flex-box - это новый метод позиционирования элементов в горизонтальных или вертикальных стеках с CSS, и он имеет 96% глобальной совместимости с браузерами. Таким образом, вы можете свободно использовать его, и если вы хотите узнать больше о статье Flex-box CSS-Tricks , по моему мнению, это лучшее место для изучения Flex-box.

Answer 5

Это так просто.

Просто решите, какую ширину вы хотите дать внутреннему div и используйте следующий CSS.

CSS

.inner{
  width: 500px; // Assumed width
  margin: 0 auto;
}

Answer 6

Самый простой ответ добавить поле: авто; к внутреннему.

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

код CSS

.outer{ width:100%; height:300px; background:yellow;}
.inner{width:30%; height:200px; margin:auto; background:red; text-align:center}

проверь мою кодовую ссылку http://codepen.io/feizel/pen/QdJJrK

Answer 7

Один из самых простых способов сделать это - использовать display: flex. Для внешнего элемента div необходимо иметь гибкий экран, а для внутреннего - margin: 0 auto, чтобы он был отцентрирован по горизонтали.

Чтобы центрировать вертикально и просто центрировать div внутри другого div, пожалуйста, посмотрите комментарии ниже .inner class

.wrapper {
  display: flex;
  /* Adding whatever height & width we want */
  height: 300px;
  width: 300px;
  /* Just so you can see it is centered */
  background: peachpuff;
}

.inner {
  /* center horizontally */
  margin: 0 auto;
  /* center vertically */
  /* margin: auto 0; */
  /* center */
  /* margin: 0 auto; */
}

<div class="wrapper">
  <div class="inner">
    I am horizontally!
  </div>
</div>

Answer 8

CSS

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

HTML

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

Answer 9

<div id="outer" style="width:100%;margin: 0 auto; text-align: center;">  
  <div id="inner">Foo foo</div>
</div>

Answer 10

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

jsfiddle - http://jsfiddle.net/josephtveter/w3sksu1w/

<p>Horz Center</p>
<div class="outterDiv">
    <div class="innerDiv horzCenter"></div>
</div>
<p>Vert Center</p>
<div class="outterDiv">
    <div class="innerDiv vertCenter"></div>
</div>
<p>True Center</p>
<div class="outterDiv">
    <div class="innerDiv trueCenter"></div>
</div>
.vertCenter
{
    position: absolute;
    top:50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.horzCenter
{
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.trueCenter
{
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.outterDiv
{
    position: relative;
    background-color: blue;
    width: 10rem;
    height: 10rem;
    margin: 2rem;
}
.innerDiv
{
    background-color: red;
    width: 5rem;
    height: 5rem;
}