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

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

#inner {
  display: inline-block;
}

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

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

Лучшие подходы к 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%;
}

В соответствии с вашей практичностью вы также можете использовать свойства 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 считается лучше?

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

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

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

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

https://jsfiddle.net/gjvfxxdj/

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

В основном это код:

#outer {
  position: relative;
}

и...

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

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

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

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

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

#element {
    display: table;
    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.

Свойство box-align CSS3

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

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

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

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

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

Обычно я использую абсолютную позицию:

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

Внешний div не нуждается в дополнительных свойствах для этого.

Для 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: является обязательным для современных браузеров, но оно необходимо в режиме Quirks Internet Explorer для поддержки устаревших браузеров.

Это мой ответ.

#outerDiv {
  width: 500px;
}

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

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

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

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

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

Здесь Fiddle показывает горизонтальное и вертикальное выравнивание.

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

Крис Койер, который написал отличный пост в разделе "Центрирование в неизвестном" в своем блоге. Это обзор нескольких решений. Я отправил сообщение, которое не опубликовано в этом вопросе. У него больше поддержка браузера, а затем 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;
}

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

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

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

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

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

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>

Затем посмотрите этот пример на скрипке.

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

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

Контейнер:

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

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

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

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

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

Text-align: center

Применяя 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 auto

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

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

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

Flexbox

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

Обратите внимание: flexbox совместим с большинством браузеров, но не со всеми. См. здесь для полного и обновленного списка совместимости браузеров.

#inner {
  display: inline-block;
}

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

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

Transform

transform: translate позволяет изменять пространство координат модели визуального форматирования CSS. Используя его, элементы могут быть переведены, повернуты, масштабированы и перекошены. Чтобы центрировать по горизонтали, требуется position: absolute и left: 50%.

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

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

<center> (устаревший)

Тег <center> является альтернативой HTML text-align: center. Он работает в старых браузерах и большинстве новых, но это не считается хорошей практикой, поскольку эта функция obsolete и удалена из веб-стандарты.

#inner {
  display: inline-block;
}

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

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

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

Вот что вы хотите в кратчайшие сроки.

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

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

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

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

1. Wrap .inner внутри .center-helper
2. Создайте .center-helper встроенный блок; он становится того же размера, что и .inner делая его шириной 300 пикселей.
3. Нажмите .center-helper 50% справа от родителя; это помещает его влево на 500px wrt. наружный.
4. Нажмите .inner 50% влево относительно его родителя; это помещает его влево на -150px по. который означает, что его левый угол равен 500 - 150 = 350px. наружный.
5. Установите переполнение на .outer для .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>

.outer {
    overflow: hidden;
}
.center-helper {
    float: left;
    position: relative;
    left: 50%;
}
.inner {
    float: left;
    position: relative;
    left: -50%;
}

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

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

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

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

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

Один из вариантов, который я нашел:

Все говорят:

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

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

margin: 0 auto;

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

text-align: center;

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

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

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

Если кто-то хочет, чтобы решение jQuery для центра выровняло эти divs:

$(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: 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>

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

<div id="outer" style="width:100%">  
    <div id="inner" style="display:table;margin:0 auto;">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>

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

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

Обратите внимание, что вы должны использовать интервалы (и inline-block), проверенные в современных браузерах + IE8. 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 для #inner div:

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

В основном я использую этот CSS для разделения div.

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

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

Стиль:

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

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

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

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

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

#outer{
    position: relative;
}

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

Это возможно с использованием CSS3 flexbox. У вас есть два метода при использовании гибкой коробки.

1. Установите родительский display:flex; и добавить свойства {justify-content:center; ,align-items:center;} {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>

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

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

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

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

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

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

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

.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 ребенка, иначе он не будет центрироваться, как ожидалось!

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

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

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

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

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

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

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

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

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

Это, безусловно, #inner ваш #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>

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

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

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

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

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

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

margin: 0 auto;

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

margin: auto 0;

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

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

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

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

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

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

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

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

HTML

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

CSS

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

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

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

css code

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

проверить ссылку на код http://codepen.io/feizel/pen/QdJJrK

CSS

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

HTML

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

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

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

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

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

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

CSS

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

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

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

Просто добавьте атрибуты CSS в родительский div

внешний {

Дисплей: сгибать; justify-content: центр; //Горизонтально по центру align-items: center; // Вертикально по центру}

Я нашел похожее с margin-left, но также можно left.

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

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

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

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

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

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

Посмотрите это руководство, сделанное Chris Coyer получение всех возможных комбинаций, которые вы можете захотеть центрировать в Интернете.

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

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

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

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

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

#outer {
    text-align: center;
}

https://jsfiddle.net/7qwxx9rs/

или

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

https://jsfiddle.net/f8su1fLz/

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

Скрипт.

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

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

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

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

<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 в представлении и поверх содержимого. Просто поместите в body HTML и наслаждайтесь.

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

Например:

HTML

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

CSS:

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

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

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

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

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

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

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

PLZ попробовать это будет работать без тега центра html

Вы можете использовать ссылку 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/.

просто используйте это в стиле

#inner{
left 40%
}

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

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

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

Код CSS

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

<center>

Я испорчен самым простым центром, известным?

</center>

Это также может работать (не используя css):

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

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

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

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

Существует побочный эффект этого обходного пути: атрибут "text-align" 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