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

Question

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

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

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

5088

html css alignment vertical-alignment centering

Источник

user20403 22 сен '08 в 12:27

138 ответов

«
1
2
3
4
5
»

Решение

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

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

#inner {
  display: inline-block;
}

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

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

1412

Источник

user291727 20 янв '11 в 22:55

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

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

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

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

453

Источник

user1307915 30 авг '12 в 12:05

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

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

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

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

https://jsfiddle.net/gjvfxxdj/

306

Источник

user501066 01 дек '11 в 19:52

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

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

#outer {
  position: relative;
}

а также...

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

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

275

Источник

user911553 11 сен '13 в 11:32

Некоторые авторы упоминают CSS 3 способ центрирования с помощью display:box,

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

Так что для полноты изложения здесь представлен новейший способ центрирования в CSS 3 с использованием модуля Flexible Box Layout.

Так что если у вас есть простая разметка вроде:

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

258

Источник

user703717 22 апр '13 в 10:32

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

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

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

172

Источник

user362006 12 май '12 в 23:45

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

157

Источник

user362477 17 май '14 в 18:38

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

121

Источник

user142632 24 июл '09 в 22:00

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

118

Источник

user9396 22 сен '08 в 12:30

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

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

111

Источник

user78336 11 мар '12 в 13:37

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

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

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

88

Источник

user2075466 07 апр '13 в 08:22

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

85

Источник

user693068 23 июн '11 в 21:42

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

77

Источник

user982488 31 май '12 в 15:32

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

#outerDiv {
  width: 500px;
}

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

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

73

Источник

user2594679 19 июл '13 в 10:21

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

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

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

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

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

68

Источник

user2345972 12 мар '15 в 14:01

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

57

Источник

user1474739 25 окт '13 в 11:53

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

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

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

РЕДАКТИРОВАТЬ: оба элемента должны быть одинаковой ширины, чтобы функционировать правильно.

54

Источник

user941158 27 май '13 в 16:12

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

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>

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

46

Источник

user1637683 04 дек '13 в 07:30

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

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

Контейнер:

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

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

42

Источник

user1946501 19 фев '16 в 16:57

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

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

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

41

Источник

user5906918 23 сен '16 в 06:49

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

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

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

40

Источник

user1685157 09 июн '17 в 08:34

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

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

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

37

Источник

user1398876 22 авг '14 в 12:10

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

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

36

Источник

user3589104 03 апр '17 в 20:12

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

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

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

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

34

Источник

user87015 17 янв '14 в 18:18

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

#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 свойства;

30

Источник

user1460756 14 окт '13 в 12:09

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

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

29

Источник

user3178923 28 янв '14 в 09:55

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

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

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

26

Источник

user9121968 10 июн '18 в 15:53

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

24

Источник

user10429035 04 апр '19 в 11:59

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

24

Источник

user1732465 11 фев '14 в 15:51

«
1
2
3
4
5
»

Другие вопросы по тегам html css alignment vertical-alignment centering

user6967 22 сен '08 в 12:29 2008-09-22 12:29 · Accepted Answer · 2008-09-22 12:29

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

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

138 ответов

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

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

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

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

Контейнер:

Контент окно:

Демо-версия:

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

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

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

Контент окно:

Демо-версия:

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

Маржа: 0 авто

Flexbox

преобразование

<center> (Осуждаемый)

Или иначе

`<center>` (Осуждаемый)