Центр div вертикально в% высоты div?

Можно ли центрировать div по вертикали в% высоты div?

Ответ 1

Это было задано достаточно времени здесь, а также по всему Интернету. Быстрый поиск принесет вам массу результатов. Во всяком случае, мой предпочтительный способ сделать это - использовать display: table-cell; и vertical-align: middle;. См. эту страницу для примера. (Остерегайтесь, что это не работает на IE6.)

Ответ 2

если ваш внутренний div имеет абсолютную высоту (скажем, 100px), вы можете сделать это:

.outerdiv{
  position: relative; //or absolute, or fixed
  height: 80%;
}

.innerdiv{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;  // it at 50% but not really centered
  margin-top: -50px; // so just move it up by the half of its height :D
}

Мне не очень нравится это решение, и я уверен, что есть много других возможностей (возможно, используя таблицы или display: table-cell;), но это первое, что приходит мне в голову...

Ответ 3

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

Предупреждение - НЕ будет работать во всех браузерах!

Ответ 4

Нет необходимости в единицах px изменить верхний, нижний, правый, левый или процент использования Приветствия

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div style="position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;">
    <div style="position: relative;
                display: inline-block;
                height: 100%;
                vertical-align: middle;"></div>
    <div style="background-color: #FEEF88;
                position: relative;
                display: inline-block;
                vertical-align: middle;">Hola todo el mundo :D</div>
</div>
</body>
</html>

Ответ 5

Я предпочитаю использовать следующую технику, которая включает два контейнера:

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

должен иметь display: table;

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

должен иметь display: table-cell;
должен иметь vertical-align: middle;

Поле содержимого:

должен иметь display: inline-block;

Вы можете добавить любой контент, который хотите в поле содержимого, не заботясь о его ширине и высоте!

Кроме того, вы можете легко добавить горизонтальное центрирование, добавив text-align: center; в свой внутренний контейнер.

Демо:

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

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

.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">
        Malcolm in the Middle
     </div>
   </div>
</div>