центр div вертикально в% высоты div? - PullRequest
Новая
       0

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

11 голосов
/ 29 июля 2010

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

Ответы [ 5 ]

15 голосов
/ 29 июля 2010

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

6 голосов
/ 29 июля 2010

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

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

.innerdiv{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;  // it's 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 голосов
/ 29 июля 2010 
.outerdiv {
  display: table-cell;
  vertical-align: middle;
}

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

0 голосов
/ 20 февраля 2016

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

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

  • должен иметь 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>

См. Также эту скрипку !

0 голосов
/ 11 апреля 2015

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

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...