Вы можете применить этот 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>

РЕДАКТИРОВАТЬ

С flexbox очень легко стилизовать div по горизонтали и вертикали по центру.

#inner {  
  border: 1px solid black;
}

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

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

Чтобы выровнять div по вертикали по центру, используйте свойство align-items: center.

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

Установите 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.

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

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

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

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

Лучшие подходы - с CSS 3.

Коробочная модель:

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

#inner {
  width: 50%;
}

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

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

Flex:

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

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

• Ссылка 2

• Ссылка 3

• Ссылка 4

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

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

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

Это поле центрируется по горизонтали путем установки ширины его правого и левого полей на «авто». Это предпочтительный способ выполнить горизонтальное центрирование с помощью 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

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

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

Внешний 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, вот - хорошее место для поиска.

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

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

#inner {
    position: relative;
    left: -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, даже если вы изменить размер свой экран.

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

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

Я в основном использую этот CSS-контент для центрирования 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;

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

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

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

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

CSS:

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

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

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

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

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

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

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

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

margin: 0 auto;

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

text-align: center;

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

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

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

<center>

Меня избаловал самый простой центр известный?

</center>

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

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>

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

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

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

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

<!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 для выравнивания этих div по центру:

$(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 процентов левее его собственной ширины. Вы можете использовать тот же прием для вертикального выравнивания.

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

Больше информации на Сеть разработчиков Mozilla.

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

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

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

Скрипка.

Добавить 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%
}

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

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

CSS

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

HTML

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

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

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

<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

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

Можно ли использовать: Совместимость с браузером

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

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

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

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

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

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

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

Маржа: 0 авто

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

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

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

Flexbox

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

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

#inner {
  display: inline-block;
}

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

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

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

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. Он работает в старых браузерах и в большинстве новых, но не считается хорошей практикой, поскольку эта функция - устаревший и была удалена из веб-стандартов.

#inner {
  display: inline-block;
}

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

Извините, но этот ребенок из 1990-х для меня просто работал:

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

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

Можно по ссылке 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 {
  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>

Мы могли бы использовать следующий класс 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>

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

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

Это централизует ваш внутренний 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 для получения дополнительных идей.

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

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

Это точно центрирует #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; своему родительскому элементу или элементу div #outer. Код должен быть таким:

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

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

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

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

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

<!DOCTYPE html>
<html>
    <head>

    </head>

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

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

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

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

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

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

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

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

С переведите

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

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

В теге HTML:

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

Помните, чтобы добавить position: relative; к родительскому элементу HTML.

С Flexbox

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

@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 Web Docs. Но как бы то ни было, такой способ есть. Это просто чтобы знать. Всегда быть замеченным в чем-то очень полезно.

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

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

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

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

С сеткой

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

div {
    border: 1px dotted grey;
}

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

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

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

CSS свойство обосновать содержание

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

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

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

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

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

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

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

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

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

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

<div class = "wrapper">

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

</div>

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

Способ 1: Используя margin: 0 auto. (margin-left и margin-right настроены автоматически)

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

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

Способ 2 Использование гибкая коробка

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

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

Способ 3 Использование тега center (Устарело)

#outer {
  background-color: silver;
}
#inner {
  display: inline;
  background-color: #f07878;
}

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

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

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

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

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

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