Question

У меня div установлено на display:block (90px height и width), и у меня есть текст внутри.

Мне нужно, чтобы текст был выровнен по центрукак по вертикали, так и по горизонтали.

Я пробовал text-align:center, но он не выполняет горизонтальную часть, поэтому я пробовал vertical-align:middle, но это не сработало.

Любые идеи

太極者無極而生 · Answer 1 · 18 апреля 2011

Если это одна строка текста и / или изображения, то это легко сделать.Просто используйте:

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

Вот и все.Если это может быть несколько строк, то это несколько сложнее.Но есть решения на http://pmob.co.uk/. Ищите «вертикальное выравнивание».

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

Обновление для 2016/2017:

Чаще всего это можно сделать с помощью transform, и оно хорошо работает даже в старых браузерахнапример, Internet Explorer 10 и Internet Explorer 11. Он может поддерживать несколько строк текста:

position: relative;
top: 50%;
transform: translateY(-50%);

Пример: https://jsfiddle.net/wb8u02kL/1/

Чтобы уменьшить ширину:

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

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Пример: https://jsfiddle.net/wb8u02kL/2/

Я пробовал flexbox, но он не был так широко распространен, как в некоторых старых версияхInternet Explorer, например Internet Explorer 10.

Josh Crozier · Answer 2 · 12 сентября 2014

Обычные методы по состоянию на 2014 год:

Подход 1 - transform translateX / translateY:

Пример здесь / Полноэкранный пример

В поддерживаемых браузерах (большинство из них) можно использовать top: 50% / left: 50% в сочетании с translateX(-50%) translateY(-50%) для динамического вертикального / горизонтального центрирования элемента.
```
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
```

Подход 2 - Метод Flexbox:

Пример здесь / Пример полноэкранного режима

В поддерживаемые браузеры , установите display целевого элемента на flex и используйте align-items: center для вертикального центрирования и justify-content: center для горизонтального центрирования.Только не забудьте добавить префиксы поставщиков для дополнительной поддержки браузера ( см. Пример ).
```
html, body, .container {
    height: 100%;
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
}
```

Подход 3- table-cell / vertical-align: middle:

Пример здесь / Пример полного экрана

В некоторых случаях вам необходимо убедиться, что высота элемента html / body установлена на 100%.

Для вертикального выравнивания установите для родительского элемента width / height значение100% и добавьте display: table.Затем для дочернего элемента измените display на table-cell и добавьте vertical-align: middle.

Для горизонтального центрирования вы можете добавить text-align: center для центрирования текста и любые другие inline дочерние элементы,В качестве альтернативы вы можете использовать margin: 0 auto, предполагая, что уровень элемента block.
```
html, body {
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}
```

Подход 4 - Абсолютно позиционированверх со смещением:

Пример здесь / Пример полного экрана

Этот подход предполагаетчто текст имеет известную высоту - в данном случае 18px.Просто поместите элемент 50% сверху относительно родительского элемента.Используйте отрицательное значение margin-top, равное половине известной высоты элемента, в данном случае - -9px.
```
html, body, .container {
    height: 100%;
}
.container {
    position: relative;
    text-align: center;
}
.container > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -9px;
}
```

Подход 5- Метод line-height (наименее гибкий - не рекомендуется):

Пример здесь

В некоторых случаях родительский элемент будет иметьфиксированная высота.Для вертикального центрирования все, что вам нужно сделать, это установить значение line-height для дочернего элемента, равное фиксированной высоте родительского элемента.

Хотя это решение будет работать в некоторых случаях, стоит отметить, что ононе будет работать при наличии нескольких строк текста - вот так .
```
.parent {
    height: 200px;
    width: 400px;
    text-align: center;
}
.parent > .child {
    line-height: 200px;
}
```

Методы 4 и 5 не самые надежные.Перейти с одним из первых 3.

Vinod · Answer 3 · 10 ноября 2015

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

<div class="box">
    <p>&#x0D05;</p>
</div>

CSS:

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

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

FatherStorm · Answer 4 · 18 апреля 2011

Добавьте строку display: table-cell; к содержимому CSS для этого div.

Только ячейки таблицы поддерживают vertical-align: middle;, но вы можете дать это определение [table-cell] для div ...

Живой пример здесь: http://jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; // This says treat this element like a table cell
    vertical-align:middle; // Now we can center vertically like in a TD
}

Santosh Khalse · Answer 5 · 16 декабря 2016

Вы можете попробовать очень простой код для этого:

  display: flex;
  align-items: center;
  justify-content: center;

.box{
  height: 90px;
  width: 90px;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="box">
  Lorem
</div>

Кодовая ссылка: http://codepen.io/santoshkhalse/pen/xRmZwr

Kent Munthe Caspersen · Answer 6 · 23 августа 2015

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

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Смотрите это в действии здесь: https://jsfiddle.net/yp1gusn7/

Aminu Kano · Answer 7 · 11 сентября 2017

Дайте этот класс CSS целевому

:

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* Not necessary just to see the result clearly */
}

<div class="centered">This text is centered horizontally and vertically</div>

user3021146 · Answer 8 · 26 июня 2018

Одним из лучших подходов является использование свойства flex в родительском div и добавление свойства margin:auto в тег элемента:

.parent {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
}

p {
    margin: auto;
}

shubham agrawal · Answer 9 · 05 июля 2017

Подход 1

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello, World!!
</div>

Подход 2

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

Подход 3

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

Arunkumar Maha · Answer 10 · 09 декабря 2015

<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

CSS центр текста (по горизонтали и вертикали) внутри блока div

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 22 ]

Обновление для 2016/2017:

Чтобы уменьшить ширину:

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

Обычные методы по состоянию на 2014 год:

Подход 1 - `transform` `translateX` / `translateY`:

Подход 2 - Метод Flexbox:

Подход 3- `table-cell` / `vertical-align: middle`:

Подход 4 - Абсолютно позиционированверх со смещением:

Подход 5- Метод `line-height` (наименее гибкий - не рекомендуется):

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

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

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

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

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

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

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

Подход 1

Подход 2

Подход 3

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

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

CSS центр текста (по горизонтали и вертикали) внутри блока div

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 22 ]

Обновление для 2016/2017:

Чтобы уменьшить ширину:

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

Обычные методы по состоянию на 2014 год:

Подход 1 - transform translateX / translateY:

Подход 2 - Метод Flexbox:

Подход 3- table-cell / vertical-align: middle:

Подход 4 - Абсолютно позиционированверх со смещением:

Подход 5- Метод line-height (наименее гибкий - не рекомендуется):

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

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

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

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

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

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

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

Подход 1

Подход 2

Подход 3

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

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

Нет похожих вопросов

Подход 1 - `transform` `translateX` / `translateY`:

Подход 3- `table-cell` / `vertical-align: middle`:

Подход 5- Метод `line-height` (наименее гибкий - не рекомендуется):