Как горизонтально центрировать

Как горизонтально центрировать

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

 <div id="outer">
  <div id="inner">Foo foo</div>
</div>
  
Показать лучший ответ

Из этих замечательных ответов я просто хочу выделить, что вы должны указать "#inner" "ширину", иначе она будет "100%", и вы не можете сказать, центрирована ли она уже.

Joma Tech привела меня сюда

@Barbu Barbu: Каким образом? В каком контексте?

Вы можете применить этот CSS к внутреннему <div> :

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

Конечно, вам не нужно устанавливать для width значение 50% . Любая ширина меньше, чем содержащий <div> , будет работать. margin: 0 auto - это то, что делает фактическое центрирование.

Если вы нацеливаетесь на Internet Explorer 8 (и более поздние версии), возможно, лучше иметь вместо этого:

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

Внутренний элемент будет центрирован по горизонтали, и он будет работать без указания конкретного width .

Рабочий пример здесь:

 #inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}  
 <div id="outer">
  <div id="inner">Foo foo</div>
</div>  

Для вертикального центрирования я обычно использую "line-height" (line-height == height). Это просто и красиво, но работает только с однострочным текстом :)

в некоторых случаях необходимо написать предложение !important для стиля полей внутреннего div, например когда вы написали что-то вроде этого outer div {margin: 0.5em;}

Вы должны использовать тег! DOCTYPE на своей html-странице, чтобы он хорошо работал в IE.

может кто-нибудь объяснить, как работает display: table? почему элементы с этим примененным стилем автоматически сжимаются до размера внутренних элементов

Обратите внимание, что может потребоваться добавить float: none; для #inner.

@Zhanger FYI: <div style="display: table;">stuff</div> совпадает с <table>stuff</table> . Назначение отображения таким образом просто указывает браузеру визуализировать элемент в виде таблицы.

Вы также устанавливаете верхнее и нижнее поля на 0, что не связано. Думаю, лучше поставить margin-left: auto; margin-right: auto .

Для поддержки мобильных браузеров я не рекомендую использовать width: 50% . Вместо этого используйте что-нибудь вроде max-width: 300px .

Это отлично работает в Chrome, но НЕ поддерживает мобильные браузеры, такие как Safari.

CSS margin:0 auto не будет работать, если у div есть свойство position , отличное от relative , как в случае position:absolute

Зачем нужно указывать ширину?

Не обязательно margin:0 auto : это может быть margin: <whatever_vertical_margin_you_need> auto вторым, являющимся горизонтальным полем.

Почему text-align: center; устарел?

Это далеко не идеальное решение, поскольку все внутри внутреннего DIV должно отображаться как элемент таблицы.

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

Почему это не работает, если внутренний элемент - это button , а не div .

Поскольку «input» является встроенным элементом и должен быть центрирован с помощью «text-align: center».

@ Зимнее выравнивание текста: центр; не устарело

@amachreetamunoemi ты так думаешь? тогда не могли бы вы спросить с лучшим решением

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

а если ширину не знаешь? Скажите, потому что контент динамический?

Максимальная ширина? что об этом?

Я использую width: fit-content; и margin: 0 auto . Я думаю, что это может работать с неизвестной шириной.

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

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

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

#inner {
  display: inline-block;
}  
 <div id="outer">  
    <div id="inner">Foo foo</div>
</div>  

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

@SabaAhang, правильный синтаксис для этого будет float: none; и, вероятно, нужен только потому, что #inner унаследовал float либо left , либо right .> откуда-то еще в вашем CSS.

Это хорошее решение. Просто имейте в виду, что inner будет наследовать text-align , поэтому вы можете установить для text-align inner значение initial или другое значение.

хорошее решение я так думаю

Недавно мне пришлось центрировать «скрытый» 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>  

Предположим, ваш 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);
}
 

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

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

маржа слева: авто; маржа-право: авто; центрирует элемент уровня блока

Ширина по умолчанию для большинства элементов уровня блока - auto, которая заполняет доступную область на экране. Просто центрирование помещает его в то же положение, что и выравнивание по левому краю. Если вы хотите, чтобы он был визуально центрирован, вы должны установить ширину (или максимальную ширину, хотя Internet Explorer 6 и более ранние версии не поддерживают это, а IE 7 поддерживает только в стандартном режиме).

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

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

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

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

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

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

те же требования, что и display: inline-block тоже ( quirksmode.org/css/display.html)

Я тоже использовал это, но никогда раньше не сталкивался с display: table; . Что оно делает?

Для 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 для поддержки устаревших браузеров.

Свойство выравнивания текста не требуется. Это совершенно не нужно.

text-align действительно необходимо для работы в режиме IE quicks, поэтому, если вы не против добавить небольшое выражение для поддержки старых браузеров, оставьте его там. (IE8 с правилами IE8 и правила IE7 работают без выравнивания текста, поэтому, возможно, это касается только IE6 и старше)

Лучше всего использовать 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;
}
  

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

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

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

Safari на данный момент по-прежнему требует флагов -webkit для flexbox (display: -webkit-flex; и -webkit-align-items: center; и -webkit-justify-content: center; )

Я всегда думаю, что использование многоуровневого кода - плохая практика. Например, с этим кодом я центрирую свой div: display: table; маржа: авто; просто и легко

Это я или этот фрагмент кода не центрирован

В 2020 году мы можем использовать flexbox caniuse.com/#feat=flexbox

Аватар Ray

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

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

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

У этого обходного пути есть побочный эффект: атрибут CSS text-align наследуется, центрируя встроенное содержимое. Часто бывает необходимо явно установить атрибут «выравнивание текста» для центрированного поля, чтобы противодействовать эффектам обходного пути 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

Это не центрирование div, а центрирование текста.

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

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

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

Это может не сработать, если у вас есть другие div ниже центрированного div.

На некоторых плакатах упоминается способ центрирования 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, вот хорошее место для поиска .

что вы имеете в виду под «устаревшим синтаксисом», он устарел?

Спецификация Flexbox претерпела 3 основных изменения. Самый последний черновик от сентября 2012 года, он официально не поддерживает все предыдущие черновики. Тем не менее, поддержка браузеров неоднородна (особенно старые браузеры Android): stackoverflow.com/questions/15662578/…

У меня это сработало в Chrome, когда версия Джастина Поли - нет.

Разве это не «оправдать-контент: центр»; для вертикального выравнивания и "align-items: center;" для горизонтального выравнивания?

@WouterVanherck это зависит от значения flex-direction . Если это «строка» (по умолчанию) - тогда justify-content: center; предназначен для горизонтального выравнивания (как я уже упоминал в ответе). Если это «столбец» - тогда justify-content: center; предназначен для вертикальное выравнивание.

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

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

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

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

Просто установите это правило только для #inner : #inner { position:relative; left:50%; transform:translateX(-50%); } . Это работает для любой ширины.

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

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

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

 #outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}  
 <div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>  

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

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

#outer {
  position: relative;
}
 

и ...

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

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

+1 для этого метода, я собирался им ответить. Обратите внимание, что вы должны указать ширину элемента, который вы хотите центрировать по горизонтали (или высоту, если центрируете по вертикали). Вот исчерпывающее объяснение: codepen.io/shshaw/full/gEiDt . Один из наиболее универсальных и широко поддерживаемых методов центрирования элементов по вертикали и / или горизонтали.

Вы не можете использовать отступы внутри div, но если вы хотите создать иллюзию, используйте границу того же цвета.

Я думаю, чтобы этот метод работал, вам нужно установить с и высоту внутреннего div

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

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

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

Вы можете сделать что-то подобное

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

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

 

Хорошая вещь, которую я недавно нашел, сочетая использование 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>
 

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

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

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

margin: 0 auto;
 

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

text-align: center;
 

text-align работает для выравнивания текста в своем контейнере, а не для его контейнера по отношению к его родительскому элементу.

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

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

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

text-align работает для выравнивания текста в своем контейнере, а не для его контейнера по отношению к его родительскому элементу.

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

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

Посмотрите этот пример jsfiddle.net/uCdPK/2 и расскажите мне, что вы об этом думаете !! !!!

<center>
 

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

</center>
 

Это сработало для меня, и я не уверен, почему это не ответ. Может кто-нибудь объяснить, что с этим не так?

Хотя @DaveWalley работает, есть 2 веские причины, почему это не лучший ответ. 1-й вопрос был для решения CSS, и это чистое решение HTML. 2-й тег CENTER уже устарел в HTML 4

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

 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 должен быть похож на этот пример на fiddle .

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>
 

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

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

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

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

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

Это центрирует его по вертикали.

Что ж, мне удалось найти решение, которое, возможно, подойдет для всех ситуаций, но использует 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);
  })
});
 

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

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

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

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

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

 .content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}  
 <div class="content">This works with any content</div>  

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

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

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

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

 #outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}  
 <div id="outer">
  <div id="inner">Blabla</div>
</div>  

Как отмечает ваша скрипка, для #inner необходимо установить ширину.

#outer не требуется никакого width:100%; , так как <div> по умолчанию всегда имеет width:100% . и text-align:center также совсем не обязательны.

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

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

Если кому-то нужно решение 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;");
});
 

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

Например:

HTML

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

CSS:

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

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

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

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

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

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}
 

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

Вот Fiddle с горизонтальным и вертикальным выравниванием.

Дополнительная информация находится в сети разработчиков Mozilla .

Также могут потребоваться префиксы поставщиков: -webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -khtml-transform: translate(-50%,0); -o-transform: translate(-50%,0);

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

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

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

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

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

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

margin: 0 auto; float: none;
 

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

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

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

Код CSS

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

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

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

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

Контейнер:

  • должен иметь 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>  

См. также эту скрипку !


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

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

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

  • должен иметь 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>  

См. также эту скрипку !

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

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

CSS

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

Аватар Qmr

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

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

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

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 .

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

#outer {
    text-align: center;
}
 

https://jsfiddle.net/7qwxx9rs/

или

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

https://jsfiddle.net/f8su1fLz/

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

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

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

Этого можно добиться с помощью 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>  

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

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

только добавьте центр выравнивания текста в родительский div (внешний), чтобы их дочерний класс автоматически принимал этот css

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

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

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

Пожалуйста, объясните, какие технологии вы используете и как они работают. Ссылка на ссылку подойдет.

Это возможно с использованием 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>  

Добавьте 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>
 

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

Чем это отличается от многих других ответов, которые, кажется, делают то же самое?

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

<1xHTML

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

Самый простой ответ: добавьте 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

 Введите описание изображения здесь

Просто 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 3:

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

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

Хорошая DEMO , касающаяся разные значения для 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>  

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

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

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

#outer{
    position: relative;
}

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

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

HTML

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

CSS

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

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

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

Вот пример:

 #inner {
  text-align: center;
  }  
 <div id="outer" style="width:100%">
  <div id="inner"><button>hello</button></div>
</div>  

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

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

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

Тег <center> устарел с HTML4, например Идра объяснила в комментариях

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

, несмотря на то, что он продолжает отлично работать в некоторых случаи. Тег
объявлен устаревшим, но он не был таким простым и эффективным, как его можно было бы достойно заменить во всех случаях.

Вы можете использовать ссылку https://plnkr.co/edit/MQD5QHJe5oUVKEvHCz8p предварительный просмотр

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

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

Вторая ссылка кажется (фактически) неработающей.

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

 #inner {
  width: 90%;
  margin: 0 auto;
  text-align:center;
}  
 <div id="outer">  
  <div id="inner">Foo foo</div>
</div>  

Центрировать 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>  

Спасибо за ваш ответ! Если вы думаете, что ваш ответ вносит что-то ценное в вопрос, обязательно объясните свой код, то, что он делает и почему работает, спасибо!

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

я тоже. использование таблицы отображения также отлично. мой другой ответ. stackoverflow.com/questions/5703552/…

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

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

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

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

Стиль:

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот еще один способ центрировать по горизонтали с помощью 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>  

Аватар Anu

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

Пожалуйста, добавьте также несколько пояснений.

Аватар Anu

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

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

Аватар Anu

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

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

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

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

margin: 0 auto;
 

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

margin: auto 0;
 

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

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

или посетите w3schools - CSS flex Property , чтобы получить больше идей.

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

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

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

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

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

Объяснение было бы в порядке.

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

Вы можете сделать это, используя 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.

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

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

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

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

Я нашел аналогичный способ с 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. */
}
 

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

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

 .outer
{
  background-color: rgb(230,230,255);
  width: 100%;
  height: 50px;
}
.inner
{
  background-color: rgb(200,200,255);
  width: 50%;
  height: 50px;
  margin: 0 auto;
}  
 <div class="outer">
  <div class="inner">
    margin 0 auto
  </div>
</div>  

Re "width 100%; ": вы имеете в виду "width: 100%; "?

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

 #outer {
  display: flex;
  justify-content: center;
}  
 <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>  

С Autoprefixer:

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

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

 #outer {
  width: 100%;
  text-align: center;
}
#inner {
  display: inline-block;
}
  
 <div id="outer">
  <div id="inner">Foo foo</div>
</div>
  

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

используйте выше css для выравнивания по центру div

Здравствуй! Этот ответ был оценен как низкокачественный из-за его длины и содержания. Это происходит потому, что ответы только на код обычно не приветствуются в SO и должны сопровождаться некоторым текстовым объяснением того, как код является решением вопроса. Спасибо!

Объяснение было бы в порядке.

Мы можем использовать 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 того же размера, что и #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>  

Пожалуйста, поместите текст, показывающий, что вы сделали и почему вы это сделали

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

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

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

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

Если у вас есть родитель некоторого роста, скажем, 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

если вы посмотрите на jsfiddle.net/jinny/p3x5jb81/9 , я просто добавил границу к показать, что в моем случае центрированный div не равен 100%, он принимает размер / длину текстового содержимого. Если центрированный текст имеет длину содержимого больше, чем внешний div, чем я согласен, нам нужно дать внутреннему div ширину. Но мое решение поддерживает данный пример.

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

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

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

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

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

Это сработало для меня, чтобы центрировать кнопки Datatables.

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

С translate

// Center horizontal mixin
@mixin center-horizontally {
  position: absolute;
  top: 50%;
  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 !

Я использовал 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;
    }  

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

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

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

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

 Введите описание изображения здесь

<center> - это только предопределенный тег, не настраиваемый и не гибкий, как в CSS. Он все еще работает, но это одни из последних живых остатков, как и и . Устаревший не означает, что он больше не будет работать в будущем ... это также означает, что новые технологии, будь то реакция узла с использованием JSX или других сложных MVC, которые генерируют виртуальные DOM, могут быть не полностью совместимы. То, что они все еще работают в HTML5, несмотря на то, что они не поддерживаются, означает, что w3c больше не поддерживает их. Также SEO: веб-сайты с устаревшим HTML могут сигнализировать поисковым системам об устаревшем коде, который может нанести вред вашему рейтингу.