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

Question

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

у меня есть div значение display:block. (90px height и width) и у меня есть некоторый текст внутри.

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

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

какие идеи?

607

css html

автор: CyanCoding

24 ответов

автор: 太極者無極而生 · Accepted Answer · 2017-02-02 13:27:05

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

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

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

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

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

Это можно чаще делать с transform, и он хорошо работает даже в старых браузерах, таких как IE10 и IE11. Он может поддерживать несколько строк текста:

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, но он не был так широко поддерживается, как это было бы сломать в некоторых старых версиях IE, таких как IE10.

автор: Josh Crozier · Accepted Answer · 2014-09-12 01:28:24

общие методы по состоянию на 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 to 100% и добавить display: table. Затем для дочернего элемента измените display to table-cell и добавить vertical-align: middle.

для горизонтального центрирования вы можете добавить text-align: center центрировать текст и любой другой inline дочерними элементами. Кроме того, вы можете использовать margin: 0 auto предполагая, что элемент

автор: Vinod · Accepted Answer · 2015-11-10 03:25:16

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

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

CSS-код:

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

принято от Быстрый Совет: Самый Простой Способ Центрировать Элементы По Вертикали И Горизонтали

автор: FatherStorm · Accepted Answer · 2011-04-18 13:28:13

добавить строку display: table-cell; к вашему css для этого div. только ячейки таблицы поддерживают вертикальное выравнивание: середина; но вы можете дать это определение [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
}

автор: Kent Munthe Caspersen · Accepted Answer · 2015-08-23 08:48:21

Я всегда использую следующий 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/

автор: Santosh Khalse · Accepted Answer · 2016-12-16 10:07:37

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

  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>

codpen link http://codepen.io/santoshkhalse/pen/xRmZwr

автор: Aminu Kano · Accepted Answer · 2017-09-11 12:41:27

дайте этот класс 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>

автор: shubham agrawal · Accepted Answer · 2017-07-05 12:54:03

подход 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>

автор: Narcisse Doudieu Siewe · Accepted Answer · 2015-02-22 03:47:32

#parent
{
  display:table;
}
#child
{
  display:table-cell;
  width:100%; //as large as its parent to center the text horizontally
  text-align: center;
  vertical-align:middle;//vertically align this element on its parent
}

автор: Arunkumar Maha · Accepted Answer · 2015-12-09 03:47:50

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

автор: user3021146 · Accepted Answer · 2018-08-06 06:31:51

один из лучших подходов-использовать свойство flex в Родительском div и добавить margin:auto свойство элемент tag

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

p{
    margin:auto;
}

автор: Debasis Paul · Accepted Answer · 2018-02-20 03:33:02

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

<div>
  Hello World!
</div>

автор: XPloRR · Accepted Answer · 2016-12-05 20:45:24

это работает для меня (протестировано ok!)

HTML-код:

<div class="mydiv">
    <p>Item to be Centered!</p>
</div>

css:

.mydiv {
    height: 100%; /* or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* to compensate own width and height */
}

вы можете выбрать другие значения, а затем 50% fi. 25% к центру на 25% родителя

автор: Abhay · Accepted Answer · 2013-11-19 10:11:14

регулировка высоты линии для получения вертикального выравнивания.

line-height: 90px;

автор: Mike Barwick · Accepted Answer · 2016-09-15 20:01:57

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

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

автор: Nikit Barochiya · Accepted Answer · 2017-03-17 05:21:21

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container{
        height:450px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
        width: 100%;
      }
      p{
      font-size:24px;}
    </style>
  </head>
  <body>
    <div class="container">
      <p>hello world</p>
    </div>
  </body>
</html>

автор: Nikit Barochiya · Accepted Answer · 2017-03-17 05:25:10

<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv{
        height:450px;
        background:#f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p{
        font-size:24px;}
    </style>
  </head>
  <body>
    <div class="maindiv">
      <h1>Title</h1>

    </div>
  </body>
</html>

автор: Clinton Roy · Accepted Answer · 2017-03-22 06:15:14

Вы можете попробовать следующие методы:

1. если у вас есть одно слово или одно предложение строки, то следующий код может сделать трюк.

имейте текст внутри тега div и дайте ему идентификатор. Определите следующие свойства для этого id.

id-name {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed red;
}

Примечание: убедитесь, что свойство line-height совпадает с высотой деления.

изображения

но, если содержание больше чем одно слово или строчка, и это не сработает. Кроме того, будут случаи, когда вы не сможете указать размер divison в px или %.(когда divison действительно маленький, и вы хотите, чтобы контент был точно посередине)

2. чтобы решить эту проблему, мы можем попробовать следующую комбинацию свойств.

id-name {
display: flex;
justify-content: center;
align-items: center;
border: 2px dashed red;
}

изображения

эти 3 строки кода устанавливают содержимое точно в середине деления (независимо от размер дисплея). The "align-items: center" помогает в вертикальном центрировании в то время как "оправдать-содержание: центр" будет делать это по горизонтали.

Примечание: Flex не работает во всех браузерах. Убедитесь, что добавлены соответствующие префиксы поставщиков для дополнительной поддержки браузера.

автор: techloris_109 · Accepted Answer · 2017-05-06 19:24:59

применить стиль:

position: absolute;
top: 50%;
left: 0;
right: 0;

ваш текст будет центрирован независимо от его длины.

автор: antelove · Accepted Answer · 2017-10-12 09:32:51

.cell-row {display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center}
.cell {display: table-cell}
.cell-middle {vertical-align: middle}

<div class="cell-row">
  <div class="cell cell-middle">Center</div>
</div>

автор: Ger Mc · Accepted Answer · 2018-02-02 11:15:16

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

.center-stuff{  
      text-align: center;
      vertical-align: middle;
      line-height: 230px;/*This should be the div height*/
    }

автор: Amir Md Amiruzzaman · Accepted Answer · 2018-07-04 20:12:54

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

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html>

автор: · Accepted Answer · 2018-07-07 14:00:49

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html>

автор: Kyle Cabral · Accepted Answer · 2014-09-12 02:55:36

footer {
    width: 100%;
    height: 80px;
    position: absolute;
    bottom: 0;
    left: 0;
}

-12

автор: Kyle Cabral

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

24 ответов

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

для сжатия оберните ширину:

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

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

подход 2 - Flexbox метод:

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

подход 1

подход 2

подход 3

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

24 ответов

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

для сжатия оберните ширину:

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

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

подход 2 - Flexbox метод:

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

подход 1

подход 2

подход 3

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

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