#outer{
  display: flex;
  width: 100%;
  height: 200px;
  justify-content:center;
  align-items:center;
}

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

Вот неполный список подходов к центрированию с использованием:

• margin и auto
• margin и calc()
• padding и box-sizing и calc()
• position: absolute и отрицательный margin-left
• position: absolute и отрицательный transform: translateX()
• display: inline-block и text-align: center
• display: table и display: table-cell
• display: flex и justify-content: center
• display: grid и justify-items: center

1. Центрируйте блочный элемент, используя auto для горизонтальных полей

.outer {
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  width: 150px;
  height: 180px;
  margin: 0 auto;
  background-color: rgb(255, 255, 0);
}

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

2. Центрируйте блочный элемент, используя calc с горизонтальными полями

.outer {
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  width: 150px;
  height: 180px;
  margin: 0 calc((300px - 150px) / 2);
  background-color: rgb(255, 255, 0);
}

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

3. Центрируйте блочный элемент, используя calc с горизонтальным отступом + box-sizing

.outer {
  width: 300px;
  height: 180px;
  padding: 0 calc((300px - 150px) / 2);
  background-color: rgb(255, 0, 0);
  box-sizing: border-box;
}

.inner {
  width: 150px;
  height: 180px;
  background-color: rgb(255, 255, 0);
}

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

4. Центрировать блочный элемент, используя position: absolute с left: 50% и отрицательным margin-left

.outer {
  position: relative;
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  position: absolute;
  left: 50%;
  width: 150px;
  height: 180px;
  margin-left: -75px;
  background-color: rgb(255, 255, 0);
}

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

5. Центрируйте блочный элемент, используя position: absolute с left: 50% и отрицательным transform: translateX()

.outer {
  position: relative;
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  position: absolute;
  left: 50%;
  width: 150px;
  height: 180px;
  background-color: rgb(255, 255, 0);
  transform: translateX(-75px);
}

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

6. Отцентрируйте элемент, используя display: inline-block и text-align: center

.outer {
  position: relative;
  width: 300px;
  height: 180px;
  text-align: center;
  background-color: rgb(255, 0, 0);
}

.inner {
  display: inline-block;
  width: 150px;
  height: 180px;
  background-color: rgb(255, 255, 0);
}

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

7. Отцентрируйте элемент, используя display: table, padding и box-sizing

.outer {
  display: table;
  width: 300px;
  height: 180px;
  padding: 0 75px;
  background-color: rgb(255, 0, 0);
  box-sizing: border-box;
}

.inner {
  display: table-cell;
  background-color: rgb(255, 255, 0);
}

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

8. Отцентрируйте элемент, используя display: flex и justify-content: center

.outer {
  display: flex;
  justify-content: center;
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  flex: 0 0 150px;
  background-color: rgb(255, 255, 0);
}

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

9. Отцентрируйте элемент, используя display: grid и justify-items: center

.outer {
  display: grid;
  justify-items: center;
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  width: 150px;
  background-color: rgb(255, 255, 0);
}

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

Есть несколько способов добиться этого: с помощью «гибкости», «позиционирования», «поля» и других. Предполагая, что #outer и #inner div заданы в вопросе:

Я бы рекомендовал использовать "flex"

#outer {
   display: flex;
   justify-content: center;
   align-items: center;  /* if you also need vertical center */
}

Выровнять по горизонтали с использованием позиционирования

#outer {
  position: relative;
}
#inner {
  position: absolute;
  left: 50%;
  translate: transformX(-50%)
}

Выравнивание по горизонтали и вертикали с использованием позиционирования

#outer {
  position: relative;
}
#inner {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: transform(-50%, -50%)
}

Выровнять по горизонтали с использованием поля

#inner {
 width: fit-content;
 margin: 0 auto;
}

Я бы просто предложил использовать justify-content: center;, когда контейнер отображается как гибкий. и text-align: center;, когда речь идет о текстовом элементе.

проверьте приведенный ниже код и измените его в соответствии с требованиями.

#content_block {
  border: 1px solid black;
  padding: 10px;
  width: 50%;
  text-align: center;
}

#container {
  border: 1px solid red;
  width:100%;
  padding: 20px;
  display: flex;
  justify-content: center;
}

<div id="container">
  <div id="content_block">Foo foo check</div>
</div>

С сеткой

Довольно простой и современный способ - использовать display: grid:

div {
    border: 1px dotted grey;
}

#outer {
    display: grid;
    place-items: center;
    height: 50px; /* not necessary */
}

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <div id="outer">
            <div>Foo foo</div>
        </div>
    </body>
</html>

Центрировать элемент без оболочки / родительского элемента с динамической высотой и шириной

Без побочного эффекта: Он не будет ограничивать ширину центрированного элемента меньше ширины области просмотра при использовании полей в Flexbox внутри центрированного элемента

position: fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%));

По горизонтали + по центру по вертикали, если высота совпадает с шириной:

position: fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));

Просто сделайте это:

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

CSS

#outer{
  display: grid;
  place-items: center;
}

Это можно сделать множеством методов. Многие парни / девушки дают правильные ответы и работают правильно. Приведу еще один паттерн.

В HTML файле

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

В файле CSS

#outer{
  width: 100%;
}

#inner{
  margin: auto;
}

Попробуйте следующий код CSS:

<style>
    #outer {
        display: inline-block;
        width: 100%;
        height: 100%;
        text-align: center;
        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;
    }
</style>

Применить над CSS с помощью кода ниже HTML, чтобы центрировать по горизонтали и по центру по вертикали (иначе: выравнивать по вертикали посередине) :

<div id="outer">
    <div id="inner">
    ...These <div>ITEMS</div> <img src="URL"/> are in center...
    </div>
</div>

После применения CSS и использования указанного выше HTML этот раздел на веб-странице будет выглядеть следующим образом:

BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃V..Middle & H..Center        ┣━1
┃                             ┣━2
┃                             ┣━3
┗┳━━━━━━┳━━━━━━┳━━━━━━┳━━━━━━┳┛
 1      2      3      4      5

AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃                             ┣━1
┃    V..Middle & H..Center    ┣━2
┃                             ┣━3
┗┳━━━━━━┳━━━━━━┳━━━━━━┳━━━━━━┳┛
 1      2      3      4      5

Вот почти минимальный код CSS:

<style>
    #outer {
        width: 100%;
        text-align: center;
    }

    #outer > .inner2 {
        display: inline-block;
    }
</style>

Применить над CSS через нижний код HTML, чтобы центрировать (по горизонтали) :

<div id="outer">
    <img class="inner2" src="URL-1"> <img class="inner2" src="URL-2">
</div>

После применения CSS и использования указанного выше HTML эта строка на веб-странице будет выглядеть так:

BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃┍━━━━━━━━━━┑                     ┃
┃│ img URL1 │                     ┃
┃┕━━━━━━━━━━┙                     ┃
┃┍━━━━━━━━━━┑                     ┃
┃│ img URL2 │                     ┃
┃┕━━━━━━━━━━┙                     ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃    ┍━━━━━━━━━━┑ ┍━━━━━━━━━━┑    ┣━1
┃    │ img URL1 │ │ img URL2 │    ┣━2
┃    ┕━━━━━━━━━━┙ ┕━━━━━━━━━━┙    ┣━3
┗┳━━━━━━━┳━━━━━━━┳━━━━━━━┳━━━━━━━┳┛
 1       2       3       4       5

<style>
    #outer {
        width: 100%;
        text-align: center;
    }

    #outer > img, #outer > div {
        display: inline-block;
    }
</style>

Таким образом, приведенный выше CSS можно применить, как показано ниже, для центрирования элементов (по горизонтали) внутри «внешней» оболочки:

<div id="outer">
    <img src="URL-1"> Text1 <img src="URL-2"> Text2
</div>

После применения CSS и использования указанного выше HTML эта строка на веб-странице будет выглядеть так:

BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃┍━━━━━━━━┑                ┃
┃│img URL1│                ┃
┃┕━━━━━━━━┙                ┃
┃Text1                     ┃
┃┍━━━━━━━━┑                ┃
┃│img URL2│                ┃
┃┕━━━━━━━━┙                ┃
┃Text2                     ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━┛

AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃   ┍━━━━━━━━━┑     ┍━━━━━━━━┑        ┣━1
┃   │img URL1 │     │img URL2│        ┣━2
┃   ┕━━━━━━━━━┙Text1┕━━━━━━━━┙Text2   ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
 1        2        3        4        5

<style>
    .outer2 {
        width: 100%;
        text-align: center;
    }

    .outer2 > div, .outer2 > div > img {
        display: inline-block;
    }
</style>

Таким образом, приведенный выше CSS можно применить, как показано ниже, для центрирования элементов (по горизонтали) внутри оболочки "outer2":

<div class="outer2">
    <div>
        Line1: <img src="URL-1"> Text1 <img src="URL-2">
    </div>
</div>
...
<div class="outer2">
    <div>
        Line2: <img src="URL-3"> Text2 <img src="URL-4">
    </div>
</div>

После применения CSS и использования указанного выше HTML эти строки на веб-странице будут выглядеть следующим образом:

BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━┓
┃Line1:                ┃
┃┍━━━━━━━━┑            ┃
┃│img URL1│            ┃
┃┕━━━━━━━━┙            ┃
┃Text1                 ┃
┃┍━━━━━━━━┑            ┃
┃│img URL2│            ┃
┃┕━━━━━━━━┙            ┃
┗━━━━━━━━━━━━━━━━━━━━━━┛
........................
┏━━━━━━━━━━━━━━━━━━━━━━┓
┃Line2:                ┃
┃┍━━━━━━━━┑            ┃
┃│img URL3│            ┃
┃┕━━━━━━━━┙            ┃
┃Text2                 ┃
┃┍━━━━━━━━┑            ┃
┃│img URL4│            ┃
┃┕━━━━━━━━┙            ┃
┗━━━━━━━━━━━━━━━━━━━━━━┛

AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃         ┍━━━━━━━━┑     ┍━━━━━━━━┑   ┣━1
┃         │img URL1│     │img URL2│   ┣━2
┃   Line1:┕━━━━━━━━┙Text1┕━━━━━━━━┙   ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
 1        2        3        4        5
.......................................
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃         ┍━━━━━━━━┑     ┍━━━━━━━━┑   ┣━1
┃         │img URL3│     │img URL4│   ┣━2
┃   Line2:┕━━━━━━━━┙Text2┕━━━━━━━━┙   ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
 1        2        3        4        5

<style>
    .outer2 {
        width: 100%;
        text-align: center;
        vertical-align: middle;
    }

    .outer2 > div, .outer2 > div > img {
        display: inline-block;
        vertical-align: middle;
    }
</style>

Таким образом, приведенный выше CSS можно применить, как показано ниже, для центрирования элементов по горизонтали и для выравнивания по вертикали в середине оболочки "outer2":

<div class="outer2">
    <div>
        Line1: <img src="URL-1"> Text1 <img src="URL-2">
    </div>
</div>
...
<div class="outer2">
    <div>
        Line2: <img src="URL-3"> Text2 <img src="URL-4">
    </div>
</div>

После применения CSS и использования указанного выше HTML эти строки на веб-странице будут выглядеть следующим образом:

BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━┓
┃Line1:                ┃
┃┍━━━━━━━━┑            ┃
┃│img URL1│            ┃
┃┕━━━━━━━━┙            ┃
┃Text1                 ┃
┃┍━━━━━━━━┑            ┃
┃│img URL2│            ┃
┃┕━━━━━━━━┙            ┃
┗━━━━━━━━━━━━━━━━━━━━━━┛
........................
┏━━━━━━━━━━━━━━━━━━━━━━┓
┃Line2:                ┃
┃┍━━━━━━━━┑            ┃
┃│img URL3│            ┃
┃┕━━━━━━━━┙            ┃
┃Text2                 ┃
┃┍━━━━━━━━┑            ┃
┃│img URL4│            ┃
┃┕━━━━━━━━┙            ┃
┗━━━━━━━━━━━━━━━━━━━━━━┛

AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃         ┍━━━━━━━━┑     ┍━━━━━━━━┑   ┣━1
┃   Line1:│img URL1│Text1│img URL2│   ┣━2
┃         ┕━━━━━━━━┙     ┕━━━━━━━━┙   ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
 1        2        3        4        5
.......................................
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃         ┍━━━━━━━━┑     ┍━━━━━━━━┑   ┣━1
┃   Line2:│img URL3│Text2│img URL4│   ┣━2
┃         ┕━━━━━━━━┙     ┕━━━━━━━━┙   ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
 1        2        3        4        5

Я видел много-много ответов, и все они устарели. Google уже реализовал решение этой общей проблемы, которое центрирует объект буквально посередине, что бы ни случилось, и ДА, оно реагирует. Так что никогда больше не делайте transform() или position вручную.

.HTML

...
<div class="parent">
   <form> ... </form>
   <div> ... </div>
</div>

.CSS

.parent {
   display: grid;
   place-items: center;
}

button {
  margin: 0 auto;
  width: fit-content;
  display: block;
}
// container should have set width (for example 100%)

Чтобы центрировать элемент по горизонтали, вы можете использовать следующие методы:

Метод 1. Использование свойства поля

Если элемент является элементом уровня блока, вы можете центрировать элемент, используя свойство поля. Установите для margin-left и margin-right значение auto (сокращенно - margin: 0 auto).

Это позволит выровнять элемент по центру по горизонтали. Если элемент не является элементом уровня блока, добавьте к нему свойство display: block.

#outer {
  background-color: silver;
}
#inner {
  width: max-content;
  margin: 0 auto;
  background-color: #f07878;
}

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

Метод 2: Использование CSS flexbox

Создайте контейнер flexbox, используйте свойство justify-content и установите для него значение center. Это позволит выровнять все элементы по горизонтали по центру веб-страницы.

#outer {
  display: flex;
  justify-content: center;
  background-color: silver;
}
#inner {
  background-color: #f07878;
}

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

Метод 3: Использование метода абсолютного положения

Это классический метод центрирования элемента. Установите postion:relative для внешнего элемента. Установите абсолютное положение внутреннего элемента и значение left: 50%. Это подтолкнет внутренний элемент к началу из центра внешнего элемента. Теперь используйте свойство transform и установите transform: translateX(-50%), это сделает элемент центром по горизонтали.

#outer {
  position: relative;
  background-color: silver;
}
#inner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f07878;
}

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

Центрирование div неизвестной высоты и ширины

По горизонтали и вертикали. Он работает с достаточно современными браузерами (Firefox, Safari / WebKit, Chrome, Internet & Explorer & 10, Opera и т. Д.)

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="content">This works with any content</div>

Поработайте с ним дальше на Codepen или на JSBin.

Flexbox центрировать по горизонтали и по вертикали Центрировать, выравнивать элемент

.wrapper {border: 1px solid #678596; max-width: 350px; margin: 30px auto;} 
      
.parentClass { display: flex; justify-content: center; align-items: center; height: 300px;}
      
.parentClass div {margin: 5px; background: #678596; width: 50px; line-height: 50px; text-align: center; font-size: 30px; color: #fff;}

<h1>Flexbox Center Horizontally and Vertically Center Align an Element</h1>
<h2>justify-content: center; align-items: center;</h2>

<div class="wrapper">

<div class="parentClass">
  <div>c</div>
</div>

</div>

В моем случае мне нужно было центрировать (на экране) раскрывающееся меню (используя гибкий бокс для его элементов) под кнопкой, которая могла бы располагаться в различных местах по вертикали. Ни одно из предложений не сработало, пока я не изменил положение с абсолютного на фиксированное, например:

  margin: auto;
  left: 0;
  right: 0;
  position: fixed;

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

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

<div style="position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);"><div>Foo foo</div></div>

Хорошая вещь, которую я недавно обнаружил, сочетая использование line-height + vertical-align и 50% левый трюк, вы можете center блок динамического размера внутри другого блока динамического размера как по горизонтали, так и по вертикали с использованием чистого CSS.

Обратите внимание, что вы должны использовать диапазоны (и inline-block), протестированные в современных браузерах + Internet Explorer 8. HTML:

<h1>Center dynamic box using only css test</h1>
<div class="container">
  <div class="center">
    <div class="center-container">
      <span class="dyn-box">
        <div class="dyn-head">This is a head</div>
        <div class="dyn-body">
          This is a body<br />
          Content<br />
          Content<br />
          Content<br />
          Content<br />
        </div>
      </span>
    </div>
  </div>
</div>

CSS:

.container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
}

.center-container {
  position: absolute;
  left: -2500px;
  top: -2500px;
  width: 5000px;
  height: 5000px;
  line-height: 5000px;
  text-align: center;
  overflow: hidden;
}

.dyn-box {
  display: inline-block;
  vertical-align: middle;
  line-height: 100%;
  /* Purely asthetic below this point */
  background: #808080;
  padding: 13px;
  border-radius: 11px;
  font-family: arial;
}

.dyn-head {
  background: red;
  color: white;
  min-width: 300px;
  padding: 20px;
  font-size: 23px;
}

.dyn-body {
  padding: 10px;
  background: white;
  color: red;
}

См. Пример здесь.

Это возможно с использованием CSS 3 Flexbox . У вас есть два метода использования Flexbox.

1. Задайте родительский элемент display:flex; и добавьте свойства {justify-content:center; ,align-items:center;} к родительскому элементу.

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

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

2. Установите родительский display:flex и добавьте margin:auto; к дочернему.

#outer {
  display: flex;
}

#inner {
  margin: auto;
}

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

В предыдущих примерах они использовали margin: 0 auto, display:table и другие ответы, использованные «с преобразованием и переводом».

А что просто с тегом? Всем известно, что существует тег <center>, который просто не поддерживается HTML5. Но он работает в HTML5. Например, в моих старых проектах.

И он работает, но теперь не только MDN Web Docs, но и другие веб-сайты советуют больше не использовать его. Здесь, в Могу ли я использовать , вы можете увидеть заметки из MDN Web Docs. Но как бы то ни было, такой способ есть. Это просто чтобы знать. Всегда быть замеченным в чем-то очень полезном.

Чтобы выровнять div внутри div посередине -

.outer{
  width: 300px; /* For example */
  height: 300px; /* For example */
  background: red;
}
.inner{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: yellow;
}

<body>
  <div class='outer'>
    <div class='inner'></div>
  </div>
</body>

Это позволит выровнять внутренний div посередине как по вертикали, так и по горизонтали.

CSS justify-content свойство

Он выравнивает элементы Flexbox по центру контейнера:

#outer {
    display: flex;
    justify-content: center;
}

С помощью Sass (синтаксис SCSS) вы можете сделать это с помощью миксина :

С помощью перевести

// Center horizontal mixin
@mixin center-horizontally {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

// Center horizontal class
.center-horizontally {
    @include center-horizontally;
}

В теге HTML:

<div class="center-horizontally">
    I'm centered!
</div>

Не забудьте добавить position: relative; к родительскому элементу HTML.

С Flexbox

Используя flex , вы можете сделать это:

@mixin center-horizontally {
  display: flex;
  justify-content: center;
}

// Center horizontal class
.center-horizontally {
    @include center-horizontally;
}

В теге HTML:

<div class="center-horizontally">
    <div>I'm centered!</div>
</div>

Попробуйте этот CodePen!

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

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

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

Центрирование только по горизонтали

По моему опыту, лучший способ центрировать блок по горизонтали - это применить следующие свойства:

Контейнер:

• должен иметь text-align: center;

Поле содержимого:

• должен иметь display: inline-block;

Демо:

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}

<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

См. Также этот Fiddle !

Центрирование по горизонтали и вертикали

По моему опыту, лучший способ центрировать прямоугольник как по вертикали, так и по горизонтали - это использовать дополнительный контейнер и применить следующие свойства:

Внешний контейнер:

• должен иметь display: table;

Внутренний контейнер:

• должен иметь display: table-cell;
• должен иметь vertical-align: middle;
• должен иметь text-align: center;

Поле содержимого:

• должен иметь display: inline-block;

Демо:

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

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

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}

<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

См. Также этот Fiddle !

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

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

CSS

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

Я делюсь этим ответом для дизайнеров, которые хотят выровнять свой контент как по горизонтали, так и по вертикали. Или вы можете сказать в центре веб-страницы. Перейдите на этот сайт, чтобы загрузить файл.

Код CSS

.ver-hor-div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Просто добавьте это содержимое CSS в свой файл CSS. Он автоматически центрирует контент.

Выровнять по горизонтали по центру в CSS:

#outer {
    display: flex;
    justify-content: center;
}

Выровнять по вертикали и горизонтали по центру в CSS:

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

Если у вас есть родитель некоторого роста, скажем, body{height: 200px} или, как показано ниже, родительский div # outer с высотой 200 пикселей, затем добавьте содержимое CSS, как показано ниже

HTML:

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

CSS:

#outer{
  display: flex;
  width: 100%;
  height: 200px;
}
#centered {
  margin: auto;
}

Тогда дочерний контент, скажем, контент, центрированный по div #, будет по вертикали или горизонтали посередине, без использования какого-либо позиционного CSS. Чтобы удалить вертикальное среднее поведение, просто измените код CSS ниже:

#centered {
  margin: 0px auto;
}

или

#outer{
  display: flex;
  width: 100%;
  height: 200px;
}
#centered {
  margin: auto;
}

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

Демо: https://jsfiddle.net/jinny/p3x5jb81/5/

Чтобы добавить только границу, чтобы показать, что внутренний div не равен 100% по умолчанию:

#outer{
  display: flex;
  width: 100%;
  height: 200px;
  border: 1px solid #000000;
}
#centered {
  margin: auto;
  border: 1px solid #000000;
}

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

ДЕМО: http://jsfiddle.net/jinny/p3x5jb81/9

Это лучший пример горизонтального центрирования <div>

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

<!DOCTYPE html>
<html>
    <head>

    </head>

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

Один из самых простых способов ...

<!DOCTYPE html>
<html>
    <head>
        <style>
            #outer-div {
                width: 100%;
                text-align: center;
                background-color: #000
            }
            #inner-div {
                display: inline-block;
                margin: 0 auto;
                padding: 3px;
                background-color: #888
            }
        </style>
    </head>

    <body>
       <div id ="outer-div" width="100%">
           <div id ="inner-div"> I am a easy horizontally centered div.</div>
       <div>
    </body>
</html>

Вы можете добавить еще один блок div того же размера, что и #inner, и переместить его влево на -50% (половина ширины #inner) и #inner на 50%.

#inner {
    position: absolute;
    left: 50%;
}

#inner > div {
    position: relative;
    left: -50%;
}

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

Мы можем использовать Flexbox , чтобы добиться этого очень легко:

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

Центрировать div внутри div по горизонтали :

#outer {
   display: flex;
   justify-content: center;
}

Центрировать div внутри div по вертикали :

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

И, чтобы полностью посередине div по вертикали и горизонтали:

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

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

Обычно, если вы используете div статическим образом.

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

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

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

Вы можете сделать это с помощью Flexbox, что в наши дни является хорошей техникой.

Для использования Flexbox вы должны передать 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 по горизонтали. Но на самом деле вы не видите никаких изменений. Поскольку наш div #outer не имеет высоты или, другими словами, его высота установлена ​​на 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 теперь центрирован. Flexbox - это новый метод позиционирования элементов в горизонтальных или вертикальных стеках с помощью CSS, который на 96% совместим с глобальными браузерами. Так что вы можете свободно использовать его, и если вы хотите узнать больше о Flexbox, посетите статью CSS-Tricks. На мой взгляд, это лучшее место для изучения Flexbox.

<!DOCTYPE html>
<html>
  <head>
    <title>Center</title>
    <style>
    .outer{
          text-align: center;
           }
    .inner{
          width: 500px;
          margin: 0 auto;
          background: brown;
          color: red;
    }

</style>

  </head>

  <body>

    <div class="outer">
      <div class="inner">This DIV is centered</div>
    </div>

  </body>
</html>

Пожалуйста, попробуйте это. Он будет работать без тега центра HTML.

Вот еще один способ центрировать по горизонтали с помощью Flexbox и без указания ширины внутреннего контейнера. Идея состоит в том, чтобы использовать псевдоэлементы, которые будут выталкивать внутренний контент справа и слева.

Использование flex:1 в псевдоэлементе заставит их заполнить оставшиеся пробелы и принять равный размер, а внутренний контейнер будет центрирован.

.container {
  display: flex;
  border: 1px solid;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}

<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

Мы также можем рассмотреть ту же ситуацию для вертикального выравнивания, просто изменив направление изгиба на столбец:

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid;
  min-height: 200px;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}

<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

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

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

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

Мне очень жаль, но этот ребенок из 1990-х работал у меня:

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

Я попаду в ад за этот грех?

Вы можете использовать одну строку кода, всего text-align:center.

Вот пример:

#inner {
  text-align: center;
  }

<div id="outer" style="width:100%">
  <div id="inner"><button>hello</button></div>
</div>

Самый известный способ, который широко используется и работает в многих браузерах , включая старые, - это использование 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>

Запустите код, чтобы увидеть, как он работает. Кроме того, есть две важные вещи, которые вы не должны забывать в своем CSS, когда пытаетесь центрировать таким образом: margin: 0 auto;. Это делает его центром div, как и нужно. Плюс не забывайте width ребенка, иначе он не будет центрирован, как ожидалось!

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

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

Проверить мой CodePen ссылка: http://codepen.io/feizel/pen/QdJJrK

Вы можете использовать CSS Flexbox.

#inner {
    display: flex;
    justify-content: center;
}

Подробнее об этом можно узнать по этой ссылке: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Этот метод также отлично работает:

div.container {
   display: flex;
   justify-content: center; /* For horizontal alignment */
   align-items: center;     /* For vertical alignment   */
}

Для внутреннего <div> единственным условием является то, что его height и width не должны быть больше, чем у его контейнера.

Да, это короткий и понятный код для горизонтального выравнивания.

.classname {
   display: box;
   margin: 0 auto;
   width: 500px /* Width set as per your requirement. */;
}

В зависимости от ваших обстоятельств самым простым решением может быть:

margin: 0 auto; float: none;

#outer {postion: relative}
#inner {
    width: 100px; 
    height: 40px; 
    position: absolute;
    top: 50%;
    margin-top: -20px; /* Half of your height */
}

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

<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 и наслаждайтесь.

Если ширина содержимого неизвестна, вы можете использовать следующий метод . Предположим, у нас есть эти два элемента:

• .outer - полная ширина
• .inner - ширина не задана (но можно указать максимальную ширину)

Предположим, что вычисленная ширина элементов составляет 1000 пикселей и 300 пикселей соответственно. Выполните следующие действия:

1. Обернуть .inner внутри .center-helper
2. Сделайте .center-helper встроенным блоком; он становится того же размера, что и .inner, делая его шириной 300 пикселей.
3. Сдвинуть .center-helper вправо на 50% относительно родительского элемента; это помещает его левую часть на 500 пикселей относительно. внешний.
4. Сдвинуть .inner на 50% влево относительно родительского элемента; это помещает его левую часть на -150 пикселей относительно. центральный помощник, что означает, что его левая сторона находится в 500 - 150 = 350 пикселей по отношению к. внешний.
5. Сделать переполнение на .outer скрытым, чтобы предотвратить горизонтальную полосу прокрутки.

Демо:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}

<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

Крис Койер, который написал в своем блоге отличный пост о «Центрировании в неизвестном». Это обзор множества решений. Я опубликовал один, которого нет в этом вопросе. У него больше поддержки браузеров, чем у решения Flexbox, и вы не используете display: table;, который может сломать другие вещи.

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
  overflow: hidden;
}

/* The element to be centered, can
   also be of any width and height */
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

Используйте приведенное ниже содержимое CSS для #inner div:

#inner {
  width: 50%;
  margin-left: 25%;
}

Я в основном использую этот CSS-контент для центрирования div s.

Я создал этот пример, чтобы показать, как вертикально и горизонтально align.

Код в основном такой:

#outer {
  position: relative;
}

и ...

#inner {
  margin: auto;
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}

И он останется в center, даже если вы измените размер экрана.

Использование:

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}

<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

Я применил встроенный стиль к внутреннему div. Используйте этот:

<div id="outer" style="width:100%">  
    <div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
</div>

Недавно я нашел подход:

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

Для правильной работы оба элемента должны быть одинаковой ширины.

Свойство CSS 3 box-align

#outer {
    width: 100%;
    height: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

Предположим, что ваш div имеет ширину 200 пикселей:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

Убедитесь, что родительский элемент расположен, т.е. относительный, фиксированный, абсолютный или липкий.

Если вы не знаете ширину своего div, вы можете использовать transform:translateX(-50%); вместо отрицательного поля.

https://jsfiddle.net/gjvfxxdj/

С CSS calc () код может стать еще проще:

.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

Принцип все тот же; поместите элемент посередине и компенсируйте ширину.

Недавно мне пришлось центрировать «скрытый» div (т.е. display:none;), внутри которого была табличная форма, которую нужно было центрировать на странице. Я написал следующий код jQuery для отображения скрытого div, а затем обновил содержимое CSS до автоматически сгенерированной ширины таблицы и изменил поле, чтобы центрировать его. (Переключатель отображения активируется при нажатии на ссылку, но этот код отображать не обязательно.)

ПРИМЕЧАНИЕ: Я разделяю этот код, потому что Google привел меня к этому решению Stack Overflow, и все сработало бы, за исключением того, что скрытые элементы не имеют ширины и не могут быть изменены / центрированы пока они не отобразятся.

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>

Я использовал Flexbox или CSS-сетку

1. Flexbox

   #outer{
       display: flex;
       justify-content: center;
   }

2. CSS-сетка

   #outer {
       display: inline-grid;
       grid-template-rows: 100px 100px 100px;
       grid-template-columns: 100px 100px 100px;
       grid-gap: 3px;
   }

Вы можете решить проблему разными способами.

Его нельзя центрировать, если не указать ширину. В противном случае по умолчанию он будет занимать все горизонтальное пространство.

Для горизонтально центрированного DIV:

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

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

Вы можете просто использовать Flexbox вот так:

#outer {
    display: flex;
    justify-content: center
}

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

Применить Autoprefixer для поддержки всех браузеров:

#outer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

Или еще

Используйте преобразование :

#inner {
    position: absolute;
    left: 50%;
    transform: translate(-50%)
}

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

С автопрефиксом:

#inner {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%);
    -ms-transform:     translate(-50%);
    transform:         translate(-50%)
}

Очень простой и кроссбраузерный ответ на горизонтальный центр - применить это правило к родительскому элементу:

.parentBox {
    display: flex;
    justify-content: center
}

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

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

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

Лучше всего использовать CSS 3.

Модель коробки:

#outer {
  width: 100%;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

#inner {
  width: 50%;
}

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

В зависимости от вашего удобства использования вы также можете использовать свойства box-orient, box-flex, box-direction.

Flex :

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Подробнее о центрировании дочерних элементов

• Ссылка 2

• Ссылка 3

• Ссылка 4

И это объясняет, почему блочная модель является лучшим подходом :

• Почему коробочная модель W3C считается лучшей?

Сделайте это просто!

#outer {
  display: flex;
  justify-content: center;
}

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

Это точно центрирует ваш #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>

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

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

.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>

Вы можете использовать display: flex для внешнего div, а для горизонтального центра вам нужно добавить justify-content: center ​​

#outer{
    display: flex;
    justify-content: center;
}

или посетите w3schools - CSS flex Property для получения дополнительных идей.

Лучшее, что я использовал в своих различных проектах, это

<div class="outer">
    <div class="inner"></div>
</div>
.outer{
  width: 500px;
  height: 500px;
  position: relative;
  background: yellow;
}
.inner{
  width: 100px;
  height: 100px;
  background:red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

ссылка на скрипт

Если кому-то нужно решение jQuery для выравнивания по центру этих блоков:

$(window).bind("load", function() {
    var wwidth = $("#outer").width();
    var width = $('#inner').width();
    $('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;");
});

На некоторых плакатах упоминается способ центрирования CSS 3 с использованием display:box.

Этот синтаксис устарел, и его больше не следует использовать. [См. Также этот пост].

Итак, для полноты картины, вот последний способ центрирования в CSS 3 с использованием Модуль гибкой компоновки блока .

Итак, если у вас простая разметка, например:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... и вы хотите центрировать свои элементы в поле, вот что вам нужно в родительском элементе (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

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

Центрирование: поля с автоматической шириной

Это поле центрируется по горизонтали, если для ширины его правого и левого полей установлено значение «Авто». Это предпочтительный способ выполнить горизонтальное центрирование с помощью CSS и очень хорошо работает в большинстве браузеров с поддержкой CSS 2. К сожалению, Internet Explorer 5 / Windows не поддерживает этот метод - недостаток этого браузера, а не методика.

Есть простой обходной путь. (Пауза, пока вы боретесь с тошнотой, вызванной этим словом.) Готовы? Internet Explorer 5 / Windows неправильно применяет атрибут CSS «выравнивание текста» к элементам уровня блока. Объявление "text-align: center" для содержащего элемента уровня блока (часто элемента BODY) центрирует поле по горизонтали в Internet Explorer 5 / Windows.

У этого обходного пути есть побочный эффект: наследуется атрибут CSS «выравнивание текста», центрируя встроенный контент. Часто бывает необходимо явно установить атрибут «выравнивание текста» для центрированного поля, чтобы противодействовать эффектам обходного пути Internet Explorer 5 / Windows. Соответствующий CSS приведен ниже.

body {
    margin: 50px 0px;
    padding: 0px;
    text-align: center;
}

#Content {
    width: 500px;
    margin: 0px auto;
    text-align: left;
    padding: 15px;
    border: 1px dashed #333;
    background-color: #EEE;
}

http://bluerobot.com/web/css/center1.html

Для Firefox и Chrome:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

Для Internet Explorer, Firefox и Chrome:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

Свойство text-align: необязательно для современных браузеров, но необходимо в режиме совместимости Internet Explorer для поддержки старых браузеров.

Установите width и установите для margin-left и margin-right значение auto. Однако это только для горизонтального . Если вы хотите обоих способов, вы просто сделаете это обоими способами. Не бойтесь экспериментировать; не похоже, что ты что-нибудь сломаешь.

Другое решение без необходимости устанавливать ширину для одного из элементов - использовать атрибут CSS 3 transform.

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

Уловка заключается в том, что translateX(-50%) устанавливает элемент #inner на 50 процентов левее его собственной ширины. Вы можете использовать тот же прием для вертикального выравнивания.

Вот Fiddle, показывающий горизонтальное и вертикальное выравнивание.

Дополнительная информация на Mozilla Developer Network.

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

Например:

HTML

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

CSS:

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

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

Я просто использую самое простое решение, но оно работает во всех браузерах:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>center a div within a div?</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }

            #outer{
                width: 80%;
                height: 500px;
                background-color: #003;
                margin: 0 auto;
            }

            #outer p{
                color: #FFF;
                text-align: center;
            }

            #inner{
                background-color: #901;
                width: 50%;
                height: 100px;
                margin: 0 auto;

            }

            #inner p{
                color: #FFF;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div id="outer"><p>this is the outer div</p>
            <div id="inner">
                <p>this is the inner div</p>
            </div>
        </div>
    </body>
</html>

Самый простой способ:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

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

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

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

Что ж, мне удалось найти решение, которое, возможно, подойдет для всех ситуаций, но использует JavaScript:

Вот структура:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

А вот фрагмент кода JavaScript:

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Если вы хотите использовать его в гибком подходе, вы можете добавить следующее:

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Например, см. эту ссылку и фрагмент ниже:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}

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

Если у вас много детей в родительском доме, ваш CSS-контент должен быть похож на этот пример на скрипте.

HTML-контент выглядит так:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

Тогда посмотрите этот пример на скрипте.

Я нашел один вариант:

Все говорят использовать:

margin: auto 0;

Но есть и другой вариант. Установите это свойство для родительского div. Это отлично работает в любое время:

text-align: center;

Посмотри, детский центр.

И, наконец, CSS для вас:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}

Flex обеспечивает поддержку более чем 97% браузеров и может быть лучшим способом решения подобных проблем в несколько строк:

#outer {
  display: flex;
  justify-content: center;
}

CSS 3:

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

display: flex;
justify-content: space-between;  // <-- space-between or space-around

Хороший ДЕМО относительно различных значений для justify-content.

CanIUse: Совместимость с браузером

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

#containerdiv {
  display: flex;
  justify-content: space-between;
}

#containerdiv > div {
  background-color: blue;
  width: 50px;
  color: white;
  text-align: center;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="containerdiv">
    <div>88</div>
    <div>77</div>
    <div>55</div>
    <div>33</div>
    <div>40</div>
    <div>45</div>
  </div>
</body>
</html>

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

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

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

Добавьте CSS во внутренний div. Установите margin: 0 auto и установите его ширину меньше 100%, что является шириной внешнего div.

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

Это даст желаемый результат.

.outer {
    text-align: center;
    width: 100%
}

Добавьте width к внутреннему div и добавьте margin:0 auto; в свойство CSS.

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.

Лучше всего использовать отображение ячеек таблицы (внутреннее), которое идет сразу после 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>

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

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

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

margin: 0 auto;

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

margin: auto 0;

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

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

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

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

Использование:

<style>
  #outer{
    text-align: center;
    width: 100%;
  }
  #inner{
    text-align: center;
  }
</style>

Используйте этот код:

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

#inner {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

Использование:

<div id="parent">
  <div class="child"></div>
</div>

Стиль:

#parent {
   display: flex;
   justify-content: center;
}

Если вы хотите центрировать его по горизонтали, вы должны написать, как показано ниже:

#parent {
   display: flex;
   justify-content: center;
   align-items: center;
}

Мы могли бы использовать следующий класс CSS, который позволяет центрировать по вертикали и горизонтали любой элемент относительно его родителя:

.centerElement{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Вы можете использовать ссылку https://plnkr.co/edit/MQD5QHJe5oUVKEvHCz8p?p=preview

.outer{
      display: table;
      width: 100%;
      height: 100%;
}
.inner {
    vertical-align: middle;
}

См. https://v4-alpha.getbootstrap.com/examples/cover/

Используйте приведенный ниже код.

HTML

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

CSS

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

Если вы не хотите устанавливать фиксированную ширину для внутреннего div, вы можете сделать что-то вроде этого:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

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

Это превращает внутренний div во встроенный элемент, который можно центрировать с помощью text-align.

Центрировать div в div

.outer {
  display: -webkit-flex;
  display: flex;

  //-webkit-justify-content: center;							
  //justify-content: center;
  
  //align-items: center;

  width: 100%;
  height: 100px;
  background-color: lightgrey;
}

.inner {
  background-color: cornflowerblue;
  padding: 2rem;
  margin: auto;  
  
  //align-self: center;						
}

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

Вы можете добавить этот код:

#inner {
  width: 90%;
  margin: 0 auto;
  text-align:center;
}

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

Flexbox

display: flex ведет себя как элемент блока и размещает его содержимое в соответствии с моделью flexbox. Он работает с justify-content: center.

Обратите внимание: Flexbox совместим со всеми браузерами, кроме Internet Explorer. См. display: flex не работает в Internet Explorer для получения полного и актуального списка совместимых браузеров.

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}

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

Выравнивание текста: по центру

Применение text-align: center встроенное содержимое центрируется внутри строчного поля. Однако, поскольку внутренний div по умолчанию имеет width: 100%, вам необходимо установить определенную ширину или использовать одно из следующих значений:

• display: block
• display: inline
• display: inline-block

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

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

Маржа: 0 авто

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

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

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

Преобразовать

transform: translate позволяет изменять координатное пространство модели визуального форматирования CSS. С его помощью элементы можно перемещать, вращать, масштабировать и наклонять. Для центрирования по горизонтали требуется position: absolute и left: 50%<76634064308>left: 50%<766340113402240>.

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

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

#inner {
  display: inline-block;
}

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

Его также можно центрировать по горизонтали и вертикали, используя абсолютное позиционирование, например:

#outer{
    position: relative;
}

#inner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

CSS

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

HTML

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

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

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

#outer {
  display: flex;
  align-content: center;
  justify-content: center;
}

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

Узнайте больше о CSS Flexbox

#outer {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  width: 100%;
  height: 200px;
 }

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

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

#outer {
    text-align: center;
}

https://jsfiddle.net/7qwxx9rs/

или

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

https://jsfiddle.net/f8su1fLz/

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

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

Я обычно использую абсолютное положение:

#inner{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

Внешний div не требует дополнительных свойств, чтобы это работало.

Вот то, что вам нужно кратчайшим путем.

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}

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

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

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

<center>

Я избалован самым простым из известных центров?

</center>

Попробуйте поиграть с

margin: 0 auto;

Если вы хотите также центрировать текст, попробуйте использовать:

text-align: center;

Если вы не хотите устанавливать фиксированную ширину и не хотите дополнительных полей, добавьте display: inline-block к вашему элементу.

Вы можете использовать:

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

Вы можете сделать что-то вроде этого

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

Это также выровняет #inner по вертикали. Если вы не хотите, удалите свойства display и vertical-align;