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

Question

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

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

Answer 1

Попробуйте это:

#outer{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#outer > #inner{
    display: inline-block;
    font-size: 19px;
    margin: 20px;
    max-width: 320px;
    min-height: 20px;
    min-width: 30px;
    padding: 14px;
    vertical-align: middle;
}

Answer 2

Лучший способ - использовать отображение ячейки таблицы (внутреннее), которое идет точно после div с таблицей отображения (внешним) и установить вертикальное выравнивание для внутреннего div (с отображением ячейки таблицы) и каждого тега, который вы используете в Внутренний div находится в центре div или страницы.

Примечание: вы должны установить указанную высоту на внешнюю

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

#outer{
  display: table;
  height: 100vh;
  width: 100%;
}


#inner{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

<div id="outer">
    <div id="inner">
      <h1>
          set content center
      </h1>
      <div>
        hi this is the best way to align your items center
      </div>
    </div>
</div>

Answer 3

Попробуйте это:

<div id="a">
    <div id="b"></div>
</div>

CSS:

#a{
   border: 1px solid red;
   height: 120px;
   width: 400px
}

#b{
   border: 1px solid blue;
   height: 90px;
   width: 300px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}

Answer 4

Добавить text-align:center; к родительскому div

#outer {
    text-align: center;
}

https://jsfiddle.net/7qwxx9rs/

или

#outer > div {
    margin: auto;
    width: 100px;
}

https://jsfiddle.net/f8su1fLz/

Answer 5

Я нашел похожее с margin-left, но может быть и left.

#inner{
    width: 100%;
    max-width: 65px; /*to adapt to screen width. Can be whatever you want*/
    left: 65px; /*this has to be approximately the same as the max-width*/
}

Answer 6

div{
   width:100px;
   height:100px;
   margin:0 auto;
  }

для обычной вещи, если вы используете div static way

если вы хотите, чтобы div был в центре, когда div является абсолютным по отношению к его родителю, вот пример:

.parentdiv{
   position:relative;
   height:500px;
}

.child_div{
   position:absolute;
   height:200px;
   width:500px;
   left:0;
   right:0;
   margin:0 auto;
}

Answer 7

это сработало для меня:

   #inner {
    position: absolute;
    margin: 0 auto;
    left: 0;
    width: 7%;
    right: 0;
}

В этом коде вы должны определить ширину элемента.

Answer 8

#outer {
  width: 160px;
  padding: 5px;
  border-style: solid;
  border-width: thin;
  display: block;
}

#inner {
  margin: auto;
  background-color: lightblue;
  border-style: solid;
  border-width: thin;
  width: 80px;
  padding: 10px;
  text-align: center;
}

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

Answer 9

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

Answer 10

для горизонтального центра DIV

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

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