it-swarm.com.ru

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

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

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

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

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

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

Если вы ориентируетесь на IE8 +, может быть лучше иметь это вместо:

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

Это сделает внутренний элемент по центру по горизонтали и работает без установки определенной переменной width.

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

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

4316
Justin Poliey

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

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

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

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

1160
Alfred

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

Узнайте больше о центрировании дочерних элементов

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

329
Konga Raju

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

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

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

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

https://jsfiddle.net/gjvfxxdj/

231
nuno_cruz

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

Код в основном это:

#outer {
  position: relative;
}

а также...

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

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

210
Tom Maton

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

175
Danield

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

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

#element {
    display: table;
    margin: 0 auto;
}
127
Salman Abbas

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

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

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

79
gizmo

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

78
Sneakyness

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

77
iamnotsam

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

55
James Moberg

Я обычно делаю это, используя абсолютную позицию:

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

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

49
william44isme

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

48
ch2o

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

#outerDiv {
  width: 500px;
}

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

43
Ankit Jain

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

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

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

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

Более подробная информация о Mozilla Developer Network .

39
Kilian Stinson

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

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

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

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

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

33
BenjaminRH

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

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>

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

28
Lalit Kumar

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

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

25
joan16v

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

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

Контейнер:

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

Смотрите также this Fiddle !


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

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

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

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

Смотрите также this Fiddle !

25
John Slegers

Вот что вы хотите кратчайшим путем. 

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

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

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

22
Kenneth Palaganas

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

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

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

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

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

Выровнять текст: по центру

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

#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 совместим с большинством браузеров, но не со всеми. Смотрите здесь для полного и актуального списка совместимости браузеров.

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

21
Paolo Forgia

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

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

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

или вы можете посетить w3schools - CSS flex Property для большего количества идей.

19
Milan Panigrahi

Существовал один вариант, который я нашел:

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

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

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

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

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

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

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

18
Billal Begueradj

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

margin: 0 auto;

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

text-align: center;
17
user1817972

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

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

#outer {
  display: flex;
  justify-content: center
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

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

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

Или иначе

использовать преобразовать :

#inner {
      position: absolute;
      left: 50%;
      transform: translate(-50%)
    }
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

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

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

CSS 3:

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

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

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

 Enter image description here

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>

7
Legends

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

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

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

6
Saurav Rastogi

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

Обратите внимание, что вы должны использовать span (и 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;
}

Смотрите пример здесь

6
Josh Mc

Как насчет ниже CSS для #inner div:

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

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

5
Rajesh

Центр 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>

3
antelove

Упрости!

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>
3
Hassan Siddiqui

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

<!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>
3
Gerald Goshorn

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

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

Стиль:

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

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

#parent {
   display: flex;
   justify-content: center;
   align-items: center;
}
3
Руслан

Это возможно с помощью CSS 3 flexbox . У вас есть два метода при использовании flex box.

  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>

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

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

3
Dream Hunter

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

#outer{
    position: relative;
}

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

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

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

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

3
Cyan Baltazar

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

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

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

2
serdarsenay

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

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

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

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

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

2
Temani Afif

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

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

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

margin: 0 auto;

а для вертикали поменяй

margin: auto 0;
1
Shivam Chhetri

CSS

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

HTML

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

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

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

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

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

1
Rafiqul Islam

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

margin:0 auto; float:none;
1
Justin Munce

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

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

код CSS

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

проверьте мою ссылку codepen http://codepen.io/feizel/pen/QdJJrK

 enter image description here

1
Faizal Munna

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

1
Mr.Pandya

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

<style>
  #outer{
    text-align: center;
    width: 100%;
  }
  #inner{
    text-align: center;
  }
</style>
1
SUNIL KUMAR E.U

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

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

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

HTML

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

CSS

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

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

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

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

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

#outer {
  display: flex;
  align-items: center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Это должно центрировать вашего ребенка или #inner горизонтально. Но вы не можете увидеть какие-либо изменения. Поскольку наш #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 article, то, по моему мнению, это лучшее место для изучения с помощью Flex-box.

1
Morteza Sadri

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

1
Qmr

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

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

CSS

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

Это обязательно отцентрирует ваш #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>

1
Mark Salvania

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

Вот пример:

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

1
Yahya Essam

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

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

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

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

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

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

Собираюсь ли я в ад за этот грех?

1
Heitor

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

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

скриптовая ссылка

1
Jaison

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

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

HTML:

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

CSS:

#outer{
  width: 500px;
  background-color: #000;
  height: 500px
}
#inner{
  background-color: #333;
  margin: 0 auto;
  width: 50%;
  height: 250px;
}

Fiddle .

0
Fahad Uddin

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

0
hossein ghaem

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

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

0
Cees Timmerman

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

#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;
}
0
Ajay Gupta

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

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

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

0
Fatemeh Khosravi Farsani

Я нашел похожее с 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*/
}
0
iorgu

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

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

0
Joseph

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

0
Anu

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

inner { width: 50%; background-color: Khaki; margin: 0 auto; }
0
uSeRnAmEhAhAhAhAhA
#inner {
  width: 50%;
  margin: 0 auto;
}
0
Javed Khan

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

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

0
Sankar

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

#outer {
    text-align: center;
}

https://jsfiddle.net/7qwxx9rs/

или же 

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

https://jsfiddle.net/f8su1fLz/

0
Friend

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

#inner {
  margin: auto;
  background-color: lightblue;
  border-style: solid;
  border-width: thin;
  width: 80px;
  padding: 10px;
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

0
Galarist

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

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}
0
Anu
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;
}
0
Mohammed Rabiulla RABI

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

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%;
}
0
Gaurang Sondagar

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

<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;
}
0
hossein ketabi

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

Например:

HTML

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

CSS:

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

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

0
user3968801