Подтвердить что ты не робот

Как вертикально выравнивать в центр содержимого div с определенной шириной/высотой?

Каким будет правильный метод вертикального центрирования любого содержимого в определенной ширине/высоте div.

В примере есть два содержимого с разной высотой, лучший способ центрировать по вертикали как с использованием класса .content. (и он работает для каждого браузера и без решения table-cell)

Уметь принимать какие-то решения, но хотелось бы знать другие идеи, используя position:absolute; top:0; bottom: 0; и margin auto.

Ответ 1

Я исследовал это немного и из того, что нашел, у вас есть четыре варианта:

Версия 1: родительский div с отображением в виде таблицы-ячейки

Если вы не возражаете использовать display:table-cell в своем родительском div, вы можете использовать следующие параметры:

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}

Live DEMO

Версия 2: родительский div с отображением и отображением таблицы содержимого таблицы

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:block;
}

.content {
    height: 100px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;    
}

Live DEMO

Версия 3: родительский div-плавающий и контент-div как отображаемая таблица-ячейка

.area{
    background: red;
    margin:10px;
    text-align: center;
    display:block;
    float: left;
}

.content {
    display:table-cell;
    vertical-align:middle;
    height: 100px;
    width: 100px;
}

Live DEMO

Версия 4: Родительская позиция div относительно абсолютной позиции содержимого

Единственная проблема, с которой я столкнулся с этой версией, заключается в том, что вам, похоже, придется создавать css для каждой конкретной реализации. Причина этого заключается в том, что для содержимого div должна быть задана высота, которую будет заполнять ваш текст, и верхняя граница будет выведена из этого. Эту проблему можно увидеть в демонстрации. Вы можете заставить его работать для каждого сценария вручную, изменив высоту% вашего содержимого div и умножив его на -.5, чтобы получить максимальное значение маржи.

.area{
    position:relative; 
    display:block;
    height:100px;
    width:100px;
    border:1px solid black;
    background:red;
    margin:10px;
}

.content { 
    position:absolute;
    top:50%; 
    height:50%; 
    width:100px;
    margin-top:-25%;
    text-align:center;
}

Live DEMO

Ответ 2

Я нашел это решение в этой статье

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

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

Он работает как шарм, если высота элемента не исправлена.

Ответ 3

margin: all_four_margin

предоставив 50% для all_four_margin, поместите элемент в центр

style="margin: 50%"

вы также можете применить его для следующих

margin: верхний правый нижний левый

margin: верхний правый и левый нижний

margin: верхняя и нижняя правая и левая

задав соответствующий%, мы получим элемент везде, где захотим.