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

avatar
Peter Mortensen
22 сентября 2008 в 12:27
4387590
126
4670

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

<div id="outer">
  <div id="inner">Foo foo</div>
</div>
Источник
Jony
7 ноября 2017 в 08:22
30

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

Ответы (126)

avatar
AhmerMH
23 января 2021 в 06:05
5129

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

Nicolas Guillaume
23 июня 2010 в 12:36
16

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

pepkin88
8 января 2011 в 21:00
2

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

Fabio
28 января 2012 в 14:23
112

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

Zhanger
19 августа 2013 в 17:20
0

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

Mert Mertce
27 сентября 2013 в 08:30
18

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

SpYk3HH
20 января 2014 в 21:01
0

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

Emmanuel Touzery
8 февраля 2014 в 22:45
20

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

rybo111
14 мая 2014 в 09:21
1

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

Sam Su
19 июня 2014 в 11:40
1

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

sarath
2 февраля 2016 в 12:37
0

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

HelloWorldNoMore
21 апреля 2016 в 18:43
1

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

YakovL
3 мая 2016 в 19:07
17

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

Winter
5 сентября 2016 в 21:17
1

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

Billal Begueradj
4 ноября 2016 в 19:40
1

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

amachree tamunoemi
20 апреля 2017 в 02:07
2

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

Saurabh Tiwari
27 июля 2017 в 19:16
0

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

Simon Logic
1 августа 2017 в 19:02
1

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

simon
4 ноября 2019 в 18:03
1

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

simon
4 ноября 2019 в 18:04
0

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

M.Idrish
5 ноября 2020 в 07:57
0

дисплей: гибкий; justify-content: center; эта работа идеальна

avatar
16 февраля 2022 в 08:28
0

<html>

*{
        margin: 0;
        padding: 0;
    }
    #outer{
        background: red;
        width: 100%;
        height: 100vh;
        display: flex;
        /*center For  vertically*/
        justify-content: center;
        flex-direction: column;
        /*center for horizontally*/
        align-items: center;
    }
    #inner{
        width: 80%;
        height: 40px;
        background: grey;
    margin-top:5px;
    }
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>horizontally center an element</title>
</head>

<body>
<div id="outer">
  <div id="inner">1</div>
  <div id="inner" style="background: green;">2</div>
  <div id="inner" style="background: yellow;">3</div>
</div>
</body>
</html>
avatar
20 января 2022 в 11:43
1
#outer{
  display: flex;
  width: 100%;
  height: 200px;
  justify-content:center;
  align-items:center;
}
avatar
Rounin
3 января 2022 в 18:24
1

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

Вот неполный список подходов к центрированию с использованием:

  • margin и auto
  • margin и calc()
  • padding и box-sizing и calc()
  • position: absolute и отрицательный margin-left
  • position: absolute и отрицательный transform: translateX()
  • display: inline-block и text-align: center
  • display: table и display: table-cell
  • display: flex и justify-content: center
  • display: grid и justify-items: center

1. Центрируйте блочный элемент, используя auto для горизонтальных полей

.outer {
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

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

2. Центрируйте блочный элемент, используя calc с горизонтальными полями

.outer {
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  width: 150px;
  height: 180px;
  margin: 0 calc((300px - 150px) / 2);
  background-color: rgb(255, 255, 0);
}
<div class="outer">
  <div class="inner"></div>
</div>

3. Центрируйте блочный элемент, используя calc с горизонтальным отступом + box-sizing

.outer {
  width: 300px;
  height: 180px;
  padding: 0 calc((300px - 150px) / 2);
  background-color: rgb(255, 0, 0);
  box-sizing: border-box;
}

.inner {
  width: 150px;
  height: 180px;
  background-color: rgb(255, 255, 0);
}
<div class="outer">
  <div class="inner"></div>
</div>

4. Центрировать блочный элемент, используя position: absolute с left: 50% и отрицательным margin-left

.outer {
  position: relative;
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  position: absolute;
  left: 50%;
  width: 150px;
  height: 180px;
  margin-left: -75px;
  background-color: rgb(255, 255, 0);
}
<div class="outer">
  <div class="inner"></div>
</div>

5. Центрируйте блочный элемент, используя position: absolute с left: 50% и отрицательным transform: translateX()

.outer {
  position: relative;
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  position: absolute;
  left: 50%;
  width: 150px;
  height: 180px;
  background-color: rgb(255, 255, 0);
  transform: translateX(-75px);
}
<div class="outer">
  <div class="inner"></div>
</div>

6. Отцентрируйте элемент, используя display: inline-block и text-align: center

.outer {
  position: relative;
  width: 300px;
  height: 180px;
  text-align: center;
  background-color: rgb(255, 0, 0);
}

.inner {
  display: inline-block;
  width: 150px;
  height: 180px;
  background-color: rgb(255, 255, 0);
}
<div class="outer">
  <div class="inner"></div>
</div>

7. Отцентрируйте элемент, используя display: table, padding и box-sizing

.outer {
  display: table;
  width: 300px;
  height: 180px;
  padding: 0 75px;
  background-color: rgb(255, 0, 0);
  box-sizing: border-box;
}

.inner {
  display: table-cell;
  background-color: rgb(255, 255, 0);
}
<div class="outer">
  <div class="inner"></div>
</div>

8. Отцентрируйте элемент, используя display: flex и justify-content: center

.outer {
  display: flex;
  justify-content: center;
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  flex: 0 0 150px;
  background-color: rgb(255, 255, 0);
}
<div class="outer">
  <div class="inner"></div>
</div>

9. Отцентрируйте элемент, используя display: grid и justify-items: center

.outer {
  display: grid;
  justify-items: center;
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  width: 150px;
  background-color: rgb(255, 255, 0);
}
<div class="outer">
  <div class="inner"></div>
</div>
avatar
Ismoil Shokirov
2 ноября 2021 в 10:59
0

Есть несколько способов добиться этого: с помощью «гибкости», «позиционирования», «поля» и других. Предполагая, что #outer и #inner div заданы в вопросе:

Я бы рекомендовал использовать "flex"

#outer {
   display: flex;
   justify-content: center;
   align-items: center;  /* if you also need vertical center */
}

Выровнять по горизонтали с использованием позиционирования

#outer {
  position: relative;
}
#inner {
  position: absolute;
  left: 50%;
  translate: transformX(-50%)
}

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

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

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

#inner {
 width: fit-content;
 margin: 0 auto;
}
avatar
30 октября 2021 в 09:07
0

Я бы просто предложил использовать justify-content: center;, когда контейнер отображается как гибкий. и text-align: center;, когда речь идет о текстовом элементе.

проверьте приведенный ниже код и измените его в соответствии с требованиями.

#content_block {
  border: 1px solid black;
  padding: 10px;
  width: 50%;
  text-align: center;
}

#container {
  border: 1px solid red;
  width:100%;
  padding: 20px;
  display: flex;
  justify-content: center;
}
<div id="container">
  <div id="content_block">Foo foo check</div>
</div>
avatar
air5
21 мая 2021 в 09:38
7

С сеткой

Довольно простой и современный способ - использовать 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>
konekoya
7 сентября 2020 в 01:23
2

Только сегодня узнал об этом. И люди должны использовать это вместо других хакерских способов решения проблемы центрирования. Для тех, кто хочет узнать об этом больше, посетите web.dev/one-line-layouts

avatar
proseosoc
21 мая 2021 в 09:35
3

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

Без побочного эффекта: Он не будет ограничивать ширину центрированного элемента меньше ширины области просмотра при использовании полей в 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%));
avatar
Abdullah Ch
21 мая 2021 в 09:33
3

Просто сделайте это:

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

CSS

#outer{
  display: grid;
  place-items: center;
}

avatar
Tharindu Lakshan
21 мая 2021 в 09:32
3

Это можно сделать множеством методов. Многие парни / девушки дают правильные ответы и работают правильно. Приведу еще один паттерн.

В HTML файле

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

В файле CSS

#outer{
  width: 100%;
}

#inner{
  margin: auto;
}
avatar
atErik
16 мая 2021 в 04:40
3

Попробуйте следующий код CSS:

<style>
    #outer {
        display: inline-block;
        width: 100%;
        height: 100%;
        text-align: center;
        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;
    }
</style>

Применить над CSS с помощью кода ниже HTML, чтобы центрировать по горизонтали и по центру по вертикали (иначе: выравнивать по вертикали посередине) :

<div id="outer">
    <div id="inner">
    ...These <div>ITEMS</div> <img src="URL"/> are in center...
    </div>
</div>

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

BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃V..Middle & H..Center        ┣━1
┃                             ┣━2
┃                             ┣━3
┗┳━━━━━━┳━━━━━━┳━━━━━━┳━━━━━━┳┛
 1      2      3      4      5

AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃                             ┣━1
┃    V..Middle & H..Center    ┣━2
┃                             ┣━3
┗┳━━━━━━┳━━━━━━┳━━━━━━┳━━━━━━┳┛
 1      2      3      4      5

Чтобы центрировать «внутренние» элементы по горизонтали внутри «внешней» оболочки, «внутренние» элементы (типа DIV, IMG и т. Д.) Должны иметь «встроенные» свойства CSS, например: display: inline или display: inline-block. и т.д., ЗАТЕМ "внешнее" свойство CSS text-align: center может работать с "внутренними" элементами.

Вот почти минимальный код CSS:

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

    #outer > .inner2 {
        display: inline-block;
    }
</style>

Применить над CSS через нижний код HTML, чтобы центрировать (по горизонтали) :

<div id="outer">
    <img class="inner2" src="URL-1"> <img class="inner2" src="URL-2">
</div>

После применения CSS и использования указанного выше HTML эта строка на веб-странице будет выглядеть так:

BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃┍━━━━━━━━━━┑                     ┃
┃│ img URL1 │                     ┃
┃┕━━━━━━━━━━┙                     ┃
┃┍━━━━━━━━━━┑                     ┃
┃│ img URL2 │                     ┃
┃┕━━━━━━━━━━┙                     ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃    ┍━━━━━━━━━━┑ ┍━━━━━━━━━━┑    ┣━1
┃    │ img URL1 │ │ img URL2 │    ┣━2
┃    ┕━━━━━━━━━━┙ ┕━━━━━━━━━━┙    ┣━3
┗┳━━━━━━━┳━━━━━━━┳━━━━━━━┳━━━━━━━┳┛
 1       2       3       4       5

Если вы не хотите указывать атрибут class = "inner2" каждый раз для каждого "внутреннего" элемента, используйте такой CSS на раннем этапе:
<style>
    #outer {
        width: 100%;
        text-align: center;
    }

    #outer > img, #outer > div {
        display: inline-block;
    }
</style>

Таким образом, приведенный выше CSS можно применить, как показано ниже, для центрирования элементов (по горизонтали) внутри «внешней» оболочки:

<div id="outer">
    <img src="URL-1"> Text1 <img src="URL-2"> Text2
</div>

После применения CSS и использования указанного выше HTML эта строка на веб-странице будет выглядеть так:

BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃┍━━━━━━━━┑                ┃
┃│img URL1│                ┃
┃┕━━━━━━━━┙                ┃
┃Text1                     ┃
┃┍━━━━━━━━┑                ┃
┃│img URL2│                ┃
┃┕━━━━━━━━┙                ┃
┃Text2                     ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━┛

AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃   ┍━━━━━━━━━┑     ┍━━━━━━━━┑        ┣━1
┃   │img URL1 │     │img URL2│        ┣━2
┃   ┕━━━━━━━━━┙Text1┕━━━━━━━━┙Text2   ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
 1        2        3        4        5

Уникальное имя / значение атрибута «id» должно использоваться только один раз только для одного элемента HTML на одной веб-странице. Таким образом, свойства CSS с одинаковым именем «id» не могут повторно использоваться для нескольких элементов HTML (некоторые веб-браузеры неправильно позволяют использовать одинаковый идентификатор для нескольких элементов).
Поэтому, когда вам нужно много строк на одной и той же веб-странице, которые должны отображать внутренние элементы / элементы в центре (по горизонтали) в этой строке, вы можете использовать такой «класс» CSS (он же: группа CSS, повторитель CSS) :
<style>
    .outer2 {
        width: 100%;
        text-align: center;
    }

    .outer2 > div, .outer2 > div > img {
        display: inline-block;
    }
</style>

Таким образом, приведенный выше CSS можно применить, как показано ниже, для центрирования элементов (по горизонтали) внутри оболочки "outer2":

<div class="outer2">
    <div>
        Line1: <img src="URL-1"> Text1 <img src="URL-2">
    </div>
</div>
...
<div class="outer2">
    <div>
        Line2: <img src="URL-3"> Text2 <img src="URL-4">
    </div>
</div>

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

BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━┓
┃Line1:                ┃
┃┍━━━━━━━━┑            ┃
┃│img URL1│            ┃
┃┕━━━━━━━━┙            ┃
┃Text1                 ┃
┃┍━━━━━━━━┑            ┃
┃│img URL2│            ┃
┃┕━━━━━━━━┙            ┃
┗━━━━━━━━━━━━━━━━━━━━━━┛
........................
┏━━━━━━━━━━━━━━━━━━━━━━┓
┃Line2:                ┃
┃┍━━━━━━━━┑            ┃
┃│img URL3│            ┃
┃┕━━━━━━━━┙            ┃
┃Text2                 ┃
┃┍━━━━━━━━┑            ┃
┃│img URL4│            ┃
┃┕━━━━━━━━┙            ┃
┗━━━━━━━━━━━━━━━━━━━━━━┛

AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃         ┍━━━━━━━━┑     ┍━━━━━━━━┑   ┣━1
┃         │img URL1│     │img URL2│   ┣━2
┃   Line1:┕━━━━━━━━┙Text1┕━━━━━━━━┙   ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
 1        2        3        4        5
.......................................
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃         ┍━━━━━━━━┑     ┍━━━━━━━━┑   ┣━1
┃         │img URL3│     │img URL4│   ┣━2
┃   Line2:┕━━━━━━━━┙Text2┕━━━━━━━━┙   ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
 1        2        3        4        5

Чтобы выровнять по вертикали посередине, нам нужно будет использовать приведенный ниже код CSS :
<style>
    .outer2 {
        width: 100%;
        text-align: center;
        vertical-align: middle;
    }

    .outer2 > div, .outer2 > div > img {
        display: inline-block;
        vertical-align: middle;
    }
</style>

Таким образом, приведенный выше CSS можно применить, как показано ниже, для центрирования элементов по горизонтали и для выравнивания по вертикали в середине оболочки "outer2":

<div class="outer2">
    <div>
        Line1: <img src="URL-1"> Text1 <img src="URL-2">
    </div>
</div>
...
<div class="outer2">
    <div>
        Line2: <img src="URL-3"> Text2 <img src="URL-4">
    </div>
</div>

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

BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━┓
┃Line1:                ┃
┃┍━━━━━━━━┑            ┃
┃│img URL1│            ┃
┃┕━━━━━━━━┙            ┃
┃Text1                 ┃
┃┍━━━━━━━━┑            ┃
┃│img URL2│            ┃
┃┕━━━━━━━━┙            ┃
┗━━━━━━━━━━━━━━━━━━━━━━┛
........................
┏━━━━━━━━━━━━━━━━━━━━━━┓
┃Line2:                ┃
┃┍━━━━━━━━┑            ┃
┃│img URL3│            ┃
┃┕━━━━━━━━┙            ┃
┃Text2                 ┃
┃┍━━━━━━━━┑            ┃
┃│img URL4│            ┃
┃┕━━━━━━━━┙            ┃
┗━━━━━━━━━━━━━━━━━━━━━━┛

AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃         ┍━━━━━━━━┑     ┍━━━━━━━━┑   ┣━1
┃   Line1:│img URL1│Text1│img URL2│   ┣━2
┃         ┕━━━━━━━━┙     ┕━━━━━━━━┙   ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
 1        2        3        4        5
.......................................
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃         ┍━━━━━━━━┑     ┍━━━━━━━━┑   ┣━1
┃   Line2:│img URL3│Text2│img URL4│   ┣━2
┃         ┕━━━━━━━━┙     ┕━━━━━━━━┙   ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
 1        2        3        4        5
avatar
15 мая 2021 в 13:32
1

#outer {
display:grid;
place-items:center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
avatar
16 апреля 2021 в 21:55
2

Я видел много-много ответов, и все они устарели. Google уже реализовал решение этой общей проблемы, которое центрирует объект буквально посередине, что бы ни случилось, и ДА, оно реагирует. Так что никогда больше не делайте transform() или position вручную.

.HTML

...
<div class="parent">
   <form> ... </form>
   <div> ... </div>
</div>

.CSS

.parent {
   display: grid;
   place-items: center;
}
avatar
30 марта 2021 в 07:45
0
button {
  margin: 0 auto;
  width: fit-content;
  display: block;
}
// container should have set width (for example 100%)
avatar
Satish Chandra Gupta
22 марта 2021 в 03:08
1

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

Метод 1. Использование свойства поля

Если элемент является элементом уровня блока, вы можете центрировать элемент, используя свойство поля. Установите для margin-left и margin-right значение auto (сокращенно - margin: 0 auto).

Это позволит выровнять элемент по центру по горизонтали. Если элемент не является элементом уровня блока, добавьте к нему свойство display: block.

#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: Использование CSS flexbox

Создайте контейнер flexbox, используйте свойство justify-content и установите для него значение center. Это позволит выровнять все элементы по горизонтали по центру веб-страницы.

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

Метод 3: Использование метода абсолютного положения

Это классический метод центрирования элемента. Установите postion:relative для внешнего элемента. Установите абсолютное положение внутреннего элемента и значение left: 50%. Это подтолкнет внутренний элемент к началу из центра внешнего элемента. Теперь используйте свойство transform и установите transform: translateX(-50%), это сделает элемент центром по горизонтали.

#outer {
  position: relative;
  background-color: silver;
}
#inner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f07878;
}
<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>
avatar
iamnotsam
25 февраля 2021 в 03:07
129

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

Phani Rithvij
4 июля 2020 в 11:20
3

Это единственный, который работает для идеального центрирования и останется центрированным даже после изменения содержимого в div.

Felypp Oliveira
29 декабря 2020 в 12:47
0

Это хороший трюк, но есть небольшой нюанс. Если элемент имеет встроенное содержимое, превышающее 50% ширины родительского элемента, то дополнительное смещение 50% от left будет экстраполировать ширину родительского элемента, разбивая содержимое на следующие строки, чтобы избежать переполнения. Но можно сохранить содержимое встроенным, установив в центрированном элементе атрибут white-space на nowrap. Попробуйте это в этом JSFiddle.

avatar
Jone
20 января 2021 в 10:40
0

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>
avatar
3 ноября 2020 в 23:46
2

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

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

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

avatar
22 сентября 2020 в 18:08
2

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

<div style="position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);"><div>Foo foo</div></div>
avatar
Josh Mc
8 сентября 2020 в 11:27
9

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

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

avatar
Dream Hunter - hashADH
8 сентября 2020 в 11:22
8

Это возможно с использованием 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>
  1. Установите родительский display:flex и добавьте margin:auto; к дочернему.

#outer {
  display: flex;
}

#inner {
  margin: auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>
avatar
4 сентября 2020 в 18:26
1

#outer
{
 display: grid;
 justify-content: center;

}
<div id="outer">
  <div id="inner">hello</div>
</div>
enter code here
avatar
Peter Mortensen
1 сентября 2020 в 12:46
2

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

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

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

Enter image description here

Thielicious
2 июня 2020 в 23:53
0

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

avatar
Utkarsh Tyagi
1 сентября 2020 в 12:43
4

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

avatar
Peter Mortensen
1 сентября 2020 в 12:36
1

CSS justify-content свойство

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

#outer {
    display: flex;
    justify-content: center;
}
avatar
Ale_info
24 июля 2020 в 14:09
4

С помощью 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

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

@mixin center-horizontally {
  display: flex;
  justify-content: center;
}

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

В теге HTML:

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

Попробуйте этот CodePen!

avatar
Fatemeh Khosravi Farsani
22 июля 2020 в 14:56
3

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

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

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

avatar
John Slegers
20 июня 2020 в 09:12
38

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

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

Контейнер:

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

См. Также этот Fiddle !


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

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

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

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

См. Также этот Fiddle !

avatar
Gaurav Aggarwal
20 июня 2020 в 09:12
2

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

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

CSS

.inner{
  width: 500px; /* Assumed width */
  margin: 0 auto;
}
avatar
Sajid
20 июня 2020 в 09:12
-1

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

Код CSS

.ver-hor-div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
avatar
ChandanK
11 мая 2020 в 21:57
17

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

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

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

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

#outer {
    display: flex;
    justify-content: center;
    align-items: center;
}
avatar
Shoma
11 мая 2020 в 21:56
4

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

Shoma
28 апреля 2020 в 03:14
0

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

avatar
Sawan mishra
11 мая 2020 в 21:53
6

Это лучший пример горизонтального центрирования <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>
avatar
Asmit
11 мая 2020 в 21:51
5

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

<!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>
avatar
SB3NDER
11 мая 2020 в 21:50
3

Вы можете добавить еще один блок 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>
Matthew Kerian
18 июля 2019 в 18:33
0

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

avatar
Appy Sharma
11 мая 2020 в 21:49
18

Мы можем использовать Flexbox , чтобы добиться этого очень легко:

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

Центрировать div внутри div по горизонтали :

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

Enter image description here

Центрировать div внутри div по вертикали :

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

Enter image description here

И, чтобы полностью посередине div по вертикали и горизонтали:

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

Enter image description here

avatar
Mohammed Rabiulla RABI
11 мая 2020 в 21:41
3
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;
}
avatar
Morteza Sadri
11 мая 2020 в 21:39
4

Вы можете сделать это с помощью Flexbox, что в наши дни является хорошей техникой.

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

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

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

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

#inner {
  height: 100px;
  background: yellow;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

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

avatar
MANGESH SUPE
11 мая 2020 в 21:36
-3

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

avatar
Temani Afif
11 мая 2020 в 21:35
4

Вот еще один способ центрировать по горизонтали с помощью 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>
avatar
serdarsenay
11 мая 2020 в 21:33
4

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

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

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

avatar
Heitor
11 мая 2020 в 21:31
3

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

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

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

Garric15
25 июля 2017 в 14:51
2

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

Heitor
26 июля 2017 в 15:17
0

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

avatar
Yahya Essam
11 мая 2020 в 21:30
3

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

Вот пример:

#inner {
  text-align: center;
  }
<div id="outer" style="width:100%">
  <div id="inner"><button>hello</button></div>
</div>
avatar
Alireza
11 мая 2020 в 21:29
4

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

avatar
Faizal Munna
11 мая 2020 в 20:44
4

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

avatar
Cyan Baltazar
11 мая 2020 в 20:37
4

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

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

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

try-catch-finally
20 декабря 2016 в 08:53
2

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

avatar
Billal Begueradj
11 мая 2020 в 20:35
24

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

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

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

CodeToLife
22 июня 2020 в 13:18
1

что касается редактирования записей, этот человек ответил первым на странице. Голосование за.

avatar
Banti Mathur
11 мая 2020 в 20:30
2

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

.classname {
   display: box;
   margin: 0 auto;
   width: 500px /* Width set as per your requirement. */;
}
avatar
Justin Munce
11 мая 2020 в 20:28
2

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

margin: 0 auto; float: none;
avatar
Majid Sadr
11 мая 2020 в 20:28
2
#outer {postion: relative}
#inner {
    width: 100px; 
    height: 40px; 
    position: absolute;
    top: 50%;
    margin-top: -20px; /* Half of your height */
}
avatar
Cees Timmerman
11 мая 2020 в 20:27
1

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

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

avatar
Salman A
11 мая 2020 в 20:18
31

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

  • .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>
avatar
Willem de Wit
11 мая 2020 в 20:11
53

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

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

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

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

avatar
Tom Maton
11 мая 2020 в 20:07
250

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

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

#outer {
  position: relative;
}

и ...

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

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

stvnrynlds
16 декабря 2013 в 18:27
16

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

Squirrl
9 июля 2014 в 11:45
8

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

Nicolas S.Xu
29 ноября 2015 в 21:39
0

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

avatar
Ankit Jain
11 мая 2020 в 19:25
61

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

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>
avatar
aamirha
11 мая 2020 в 19:23
10

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

<div id="outer" style="width:100%">  
    <div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
</div>
avatar
BenjaminRH
11 мая 2020 в 19:23
48

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

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

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

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

Jose Rui Santos
24 ноября 2015 в 10:30
0

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

avatar
neoneye
9 мая 2020 в 14:13
98

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

#outer {
    width: 100%;
    height: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}
cimmanon
24 апреля 2013 в 18:52
8

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

avatar
nuno_cruz
9 мая 2020 в 14:01
272

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

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

Aloso
30 декабря 2015 в 04:02
0

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

morebees
10 ноября 2017 в 19:15
0

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

morebees
10 ноября 2017 в 19:16
0

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

avatar
James Moberg
9 мая 2020 в 13:51
74

Недавно мне пришлось центрировать «скрытый» 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>
avatar
jual ahmed
8 мая 2020 в 17:20
4

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

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

avatar
gizmo
8 мая 2020 в 17:02
105

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

gman
2 июня 2011 в 15:45
52

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

user9016207
17 марта 2018 в 22:32
0

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

Rick
15 октября 2019 в 04:15
2

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

avatar
pavelbere
20 ноября 2019 в 17:46
4

.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>
Peter Mortensen
19 ноября 2019 в 12:16
0

По поводу «width 100%;»: Вы имеете в виду «width: 100%;»?

avatar
Riddhi Busa
19 ноября 2019 в 12:23
-2

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

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  display: inline-block;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
avatar
Shashin Bhayani
19 ноября 2019 в 12:21
18

Вы можете просто использовать 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%)
}
avatar
Ady Ngom
19 ноября 2019 в 12:15
14

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

.parentBox {
    display: flex;
    justify-content: center
}
avatar
iorgu
19 ноября 2019 в 12:12
1

Я нашел аналогичный способ с 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. */
}
avatar
29 мая 2019 в 13:17
1
#inner {
  width: 50%;
  margin: 0 auto;
}
Javed Khan
29 мая 2019 в 13:18
0

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

d_kennetz
29 мая 2019 в 16:03
0

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

Peter Mortensen
11 мая 2020 в 21:44
0

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

avatar
Konga Raju
15 мая 2019 в 13:38
416

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

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

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

cimmanon
24 апреля 2013 в 18:51
28

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

Joe
23 июля 2015 в 15:59
5

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

simon
4 ноября 2019 в 18:11
0

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

avatar
26 марта 2019 в 15:27
6

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

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>
Peter Mortensen
11 мая 2020 в 21:44
0

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

avatar
Mark Salvania
7 сентября 2018 в 22:02
4

Это точно центрирует ваш #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>
avatar
7 сентября 2018 в 21:56
2

Один из самых простых способов сделать это - использовать 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>
avatar
Milan Panigrahi
20 августа 2018 в 12:57
25

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

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

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

avatar
Chris
14 августа 2018 в 14:58
1

#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>
Peter Mortensen
11 мая 2020 в 21:36
0

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

avatar
7 августа 2018 в 10:01
4

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

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

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

avatar
sarath
19 марта 2018 в 09:34
19

Если кому-то нужно решение jQuery для выравнивания по центру этих блоков:

$(window).bind("load", function() {
    var wwidth = $("#outer").width();
    var width = $('#inner').width();
    $('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;");
});
avatar
Danield
17 марта 2018 в 20:14
236

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

kongaraju
6 сентября 2013 в 10:18
0

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

cimmanon
1 октября 2013 в 20:33
8

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

Vern Jensen
29 июня 2016 в 02:50
0

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

Wouter Vanherck
22 марта 2017 в 12:04
0

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

Danield
22 марта 2017 в 12:29
5

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

avatar
Ray
17 марта 2018 в 20:10
-11

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

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

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

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

clickbait
12 июня 2015 в 23:50
5

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

avatar
ch2o
17 марта 2018 в 19:13
65

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

Touhid Rahman
23 мая 2013 в 05:29
7

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

heytools
4 ноября 2017 в 02:02
0

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

avatar
Sneakyness
17 марта 2018 в 19:11
109

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

avatar
Kilian Stinson
17 марта 2018 в 19:08
58

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

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

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

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

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

Skippy le Grand Gourou
2 сентября 2015 в 13:48
4

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

avatar
17 марта 2018 в 18:56
1

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

Например:

HTML

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

CSS:

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

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

avatar
Gerald Goshorn
17 марта 2018 в 18:53
4

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

<!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>
avatar
joan16v
17 марта 2018 в 18:51
33

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

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
<div id="outer">
  <div id="inner">Blabla</div>
</div>
Michael Terry
5 февраля 2015 в 21:06
2

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

Mobarak Ali
6 мая 2019 в 22:57
0

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

avatar
hossein
17 марта 2018 в 18:50
1

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

<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;
}
avatar
Miguel Leite
17 марта 2018 в 18:47
23

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

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

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>

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

avatar
Pnsadeghy
17 марта 2018 в 18:38
21

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

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

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 */
}
Lalit Kumar Maurya
4 декабря 2013 в 07:32
0

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

Pnsadeghy
4 декабря 2013 в 08:35
0

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

Lalit Kumar Maurya
4 декабря 2013 в 09:23
0

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

Lalit Kumar Maurya
4 декабря 2013 в 10:03
0

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

Miguel Silva
28 марта 2021 в 19:14
0

это отлично работает. # Ужин не нужен.

avatar
Sandesh Damkondwar
17 марта 2018 в 18:34
27

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

#outer {
  display: flex;
  justify-content: center;
}
avatar
Legends
17 марта 2018 в 16:21
9

CSS 3:

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

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

Хороший ДЕМО относительно различных значений для 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>
avatar
Sankar
17 марта 2018 в 16:20
1

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

#inner{
  display: block;
  margin: 0px auto;
  width: 100px;
}
<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>
avatar
Peter Mortensen
17 марта 2018 в 16:08
-1

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

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

Eiko
13 января 2017 в 23:31
1

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

avatar
amit bende
17 марта 2018 в 16:05
-4
.outer {
    text-align: center;
    width: 100%
}
amit bende
9 декабря 2016 в 13:25
0

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

avatar
Mr.Pandya
17 марта 2018 в 16:05
2

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

avatar
17 марта 2018 в 16:04
1

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.

avatar
hossein ghaem
17 марта 2018 в 15:34
1

Лучше всего использовать отображение ячеек таблицы (внутреннее), которое идет сразу после 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>
avatar
Shivam Chhetri
17 марта 2018 в 15:14
2

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

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

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

margin: 0 auto;

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

margin: auto 0;
avatar
Anu
17 марта 2018 в 15:14
1

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

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}
Anu
25 января 2018 в 07:29
0

<div class = "DivCenter"> </div>

iBug
25 января 2018 в 07:35
0

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

avatar
Gaurang Sondagar
17 марта 2018 в 15:11
1

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

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%;
}
avatar
SUNIL KUMAR E.U
17 марта 2018 в 15:10
2

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

<style>
  #outer{
    text-align: center;
    width: 100%;
  }
  #inner{
    text-align: center;
  }
</style>
avatar
Husain Ahmed
17 марта 2018 в 12:03
2

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

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

#inner {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}
avatar
Руслан
17 марта 2018 в 12:00
4

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

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

Стиль:

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

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

#parent {
   display: flex;
   justify-content: center;
   align-items: center;
}
avatar
Elias MP
17 марта 2018 в 11:59
2

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

.centerElement{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
avatar
sibaspage
17 марта 2018 в 11:56
-2

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

Peter Mortensen
17 марта 2018 в 11:57
0

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

avatar
Faizal
17 марта 2018 в 11:51
2

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

HTML

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

CSS

#outer {
  text-align: center;
}
#inner{
  display: inline-block;
}
avatar
25 января 2018 в 06:45
1

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>
BlackBeard
25 января 2018 в 07:04
1

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

avatar
Alfred
22 ноября 2017 в 11:34
1330

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

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

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

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

Doug McLean
12 ноября 2015 в 09:21
15

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

pmoleri
18 ноября 2016 в 21:52
9

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

Ashwin K Joseph
16 августа 2020 в 18:48
0

но разве вопрос не связан с центрированием div целиком, а не только с текстом? Можно ли использовать text-align для выравнивания div по центру? или это только для текста?

avatar
antelove
27 сентября 2017 в 15:24
4

Центрировать 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>
Ian H.
23 сентября 2017 в 17:29
0

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

livefreeor
12 октября 2017 в 01:13
1

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

antelove
12 октября 2017 в 09:30
0

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

avatar
4 августа 2017 в 15:08
2

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

#inner {
  width: 90%;
  margin: 0 auto;
  text-align:center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>
avatar
Paolo Forgia
9 июня 2017 в 08:34
32

Flexbox

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

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

#inner {
  display: inline-block;
}

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

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

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

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

transform: translate позволяет изменять координатное пространство модели визуального форматирования CSS. С его помощью элементы можно перемещать, вращать, масштабировать и наклонять. Для центрирования по горизонтали требуется position: absolute и left: 50%<76634064308>left: 50%<766340113402240>.

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

<center> (Устарело)

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

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

avatar
10 мая 2017 в 02:56
4

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

#outer{
    position: relative;
}

#inner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}
avatar
Abdul Ghaffar
24 февраля 2017 в 08:33
2

CSS

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

HTML

<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>
avatar
sneha
31 января 2017 в 09:49
-4
<div id="outer" style="width:100%">  
  <div id="inner" style="text-align:center">Foo foo</div>
</div>
avatar
1 ноября 2016 в 13:41
8

Этого можно добиться с помощью 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>
avatar
Friend
24 августа 2016 в 08:09
1

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

#outer {
    text-align: center;
}

https://jsfiddle.net/7qwxx9rs/

или

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

https://jsfiddle.net/f8su1fLz/

avatar
9 июня 2016 в 20:21
2

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

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;
}
avatar
william44isme
31 мая 2016 в 13:19
71

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

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

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

NoChance
26 июля 2018 в 07:59
0

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

avatar
8 мая 2016 в 04:50
2

<div id="outer" style="width:100%;margin: 0 auto; text-align: center;">  
  <div id="inner">Foo foo</div>
</div>
avatar
caniz
9 ноября 2015 в 03:35
26

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

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 % );
}
Michael Terry
6 февраля 2015 в 00:24
3

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

avatar
anand jothi
20 мая 2015 в 23:37
8
#inner {
    width: 50%;
    margin: 0 auto;
}
Rapnar
20 октября 2015 в 17:49
0

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

avatar
8 марта 2014 в 19:19
1

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

inner { width: 50%; background-color: Khaki; margin: 0 auto; }
Gui Imamura
2 апреля 2014 в 02:00
1

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

avatar
2 декабря 2013 в 22:48
-4
<center>

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

</center>
DaveWalley
20 января 2014 в 04:26
0

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

Idra
26 января 2014 в 13:42
14

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

avatar
5 ноября 2013 в 15:21
18

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

margin: 0 auto;

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

text-align: center;
Lalit Kumar Maurya
4 декабря 2013 в 07:33
0

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

avatar
29 октября 2013 в 17:23
157

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

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

#element {
    display: table;
    margin: 0 auto;
}
montrealmike
11 сентября 2012 в 15:09
3

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

Matt Cremeens
31 июля 2017 в 11:25
0

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

avatar
16 октября 2013 в 17:08
28

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

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