Вертикально центральным текстом на 100% высотой div?

Я работаю с div, который составляет 100% от высоты родительских div.

В div содержится только одна строка текста.

У div не может быть фиксированной высоты.

Итак, мой вопрос.

Как вертикально центрировать строку текста?

Я попытался использовать:

display: table-cell;  
line-height:200%;

Если важно, что div абсолютно позиционирован.

Текущий CSS

.requests {
    position: absolute;
    right: 0;
    height: 100%;
    width: 50px;
    padding: 0 10px;
    background-color: #69A4B5;
    display: table-cell;
    vertical-align: middle;
    border-bottom-right-radius: 5px;
}

Ответы

Ответ 1

Этот ответ больше не лучший ответ... см. ниже ответ flexbox!

Чтобы получить его идеально по центру (как указано в david answer), вам нужно добавить отрицательный верхний край. Если вы знаете (или усиливаете) только одну строку текста, вы можете использовать:

margin-top: -0.5em;

например:

http://jsfiddle.net/45MHk/623/

//CSS:
html, body, div {
    height: 100%;
}

#parent
{
    position:relative;
    border: 1px solid black;
}

#child
{
    position: absolute;
    top: 50%;
    /* adjust top up half the height of a single line */
    margin-top: -0.5em;
    /* force content to always be a single line */
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    text-overflow: ellipsis;
}

//HTML:
<div id="parent">
    <div id="child">Text that is suppose to be centered</div>
</div>

Первоначально принятый ответ не будет располагаться вертикально по центру текста (он сосредотачивается на верхней части текста). Итак, если ваш родитель не очень высокий, он не будет выглядеть центрированным, например:

http://jsfiddle.net/45MHk/

//CSS:
#parent
{
    position:relative;
    height: 3em;
    border: 1px solid black;
}

#child
{
    position: absolute;
    top: 50%;
} 

//HTML:
<div id="parent">
    <div id="child">Text that is suppose to be centered</div>
</div>

Ответ 2

Изменить: лучший и самый простой способ сделать это (в настоящее время в ~~2015~~ 2017) использует flexbox:

.parent-selector {
    display: flex;
    align-items: center;
}

И что он: D

Завершите этот рабочий пример: http://jsfiddle.net/qj2Jr/114/

Старый ответ: Вы можете использовать вертикальное выравнивание: среднее, если вы также укажете также display: table-cell;

.div {
    display: table-cell;
    vertical-align: middle;
}

Рабочий пример: http://jsfiddle.net/qj2Jr/1/

Если он не работает, вы можете попробовать установить его родительский display: table;:

.parent-selector {
    display: table;
}

Изменить: У вас есть этот метод плюс все методы, рассмотренные в этом вопросе, в этом другом вопросе: Как вертикально центрировать текст с помощью CSS?

Ответ 3

Попробуйте этот http://jsfiddle.net/Husamuddin/ByNa3/ он отлично работает со мной,
CSS

.table {
    width:100%;
    height:100%;
    position:absolute;
    display:table;
}
.cell {
    display:table-cell;
    vertical-align:middle;
    width:100%;
    height:100%:
}

и html

<div class="table">
    <div class="cell">Hello, I'm in the middle</div>
</div>

Ответ 4

Поскольку он абсолютно позиционирован, вы можете использовать верх: 50% для вертикального выравнивания по центру.

Но тогда вы сталкиваетесь с проблемой того, что страница больше, чем вы хотите. Для этого вы можете использовать переполнение: hidden для родительского div. Это то, что я использовал для создания того же эффекта:

CSS:

div.parent {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
}
div.parent div.absolute {
    position: absolute;
    top: 50%;
    height: 300px;
}

HTML:

<div class="parent">
    <div class="absolute">This is vertically center aligned</div>
</div>

Ответ 5

Несмотря на то, что этот вопрос довольно старый, вот решение, которое работает как с одной, так и с несколькими линиями, которые должны быть центрированы по вертикали (можно легко центрировать как вертикально, так и горизонтально, как показано в css в Демо.

HTML

<div class="parent">
    <div class="child">Text that needs to be vertically centered</div>
</div>

CSS

.parent {
    position: relative;
    height: 400px;
}

.child {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Ответ 6

Я не согласен, здесь свободное решение JS, которое работает:

<html style="height: 100%;">
    <body style="vertical-align: middle; margin: 0px; height: 100%;">
        <div style="height: 100%; width: 100%; display: table; background-color: #ccc;">
            <div style="display: table-cell; width: 100%; vertical-align: middle;">
                <div style="height: 300px; width: 600px; background-color: wheat; margin-left: auto; margin-right: auto;">A</div>
            </div>
        </div>
    </body>
</html>

Ответ 7

Если вы знаете, насколько высок ваш текст, вы можете использовать комбинацию top:50% и margin-top:-x px, где x - половина высоты вашего текста.

Рабочий пример: http://jsfiddle.net/Qy4yy/

Ответ 8

просто оберните свой контент таблицей, подобной этой:

  <table width="100%" height="100%">
         <tr align="center">
               <th align="center">
                 text
               </th>
          </tr>
  </table><

Ответ 9

Вы пробовали линию-высоту: 1em;? Я помню, что это способ сделать его вертикальным.

Ответ 10

Пробовал ли вы вертикально-выровнять: средний???

Более подробную информацию о вертикальном выравнивании вы можете найти здесь: http://www.w3schools.com/css/pr_pos_vertical-align.asp

Ответ 11

Вертикальное выравнивание, динамическая высота в сочетании с абсолютным положением за исключением некоторых особых условий, которые не возможны без нескольких строк JS (например, jQuery). (возможно, в некоторых случаях может быть решена с использованием кода backend или min-height в сочетании с разумными вершинами или марками, но не идеальными)

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

Не обижайтесь, но большинство ответов здесь не работают.

Ответ 12

Установка высоты линии так же, как высота div приведет к тому, что текст станет центром. Работает только в том случае, если есть одна строка. (например, кнопка).

Ответ 13

Современное решение - работает во всех браузерах и IE9 +

caniuse - поддержка браузера.

.v-center {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

Пример: http://jsbin.com/rehovixufe/1/