Вертикальный текст по центру в 100% высоты? - PullRequest
Новая
       1

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

33 голосов
/ 21 января 2011

Я работаю с 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;
}

Ответы [ 13 ]

30 голосов
/ 21 января 2011

Редактировать: лучший и самый простой способ сделать это (в настоящее время в 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?

26 голосов
/ 07 ноября 2012

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

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

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>​
7 голосов
/ 28 ноября 2013

Попробуйте это 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>
6 голосов
/ 21 января 2011

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

Но затем вы сталкиваетесь с тем, что страница больше, чем вы хотите. Для этого вы можете использовать overflow: 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>
3 голосов
/ 15 августа 2014

Несмотря на то, что этот вопрос довольно старый, вот решение, которое работает как с одной, так и с несколькими строками, которые должны быть отцентрированы по вертикали (может быть легко отцентрировано как по вертикали, так и по горизонтали, как видно из 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%);
}
2 голосов
/ 26 июля 2012

Я не согласен, вот бесплатное решение 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>
1 голос
/ 13 марта 2012

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

  <table width="100%" height="100%">
         <tr align="center">
               <th align="center">
                 text
               </th>
          </tr>
  </table><
1 голос
/ 21 января 2011

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

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

0 голосов
/ 08 июня 2015

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

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

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

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

0 голосов
/ 05 апреля 2013

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

Страница:
...