Как вертикальное выравнивание элементов в div?

792

У меня есть div с двумя изображениями и h1. Все они должны быть вертикально выровнены внутри div, рядом друг с другом.

Одно из изображений должно быть absoluteрасположено внутри div.

Какой CSS необходим для работы всех распространенных браузеров?

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>
Абду
источник
14
Я составил список всех способов выравнивания по вертикали .. Я собираюсь оставить его здесь: jsfiddle.net/techsin/FAwku/1
Мухаммед Умер
2
Вот два простых метода для центрирования элемента внутри div, по вертикали, по горизонтали или в обоих (чистый CSS): stackoverflow.com/a/31977476/3597276
Майкл Бенджамин
1
margin-top: auto и margin-bottom: auto (Работает для многих случаев).
CrippledTable

Ответы:

932

Вау, эта проблема популярна. Это основано на недоразумении в vertical-alignсобственности. Эта превосходная статья объясняет это:

Понимание vertical-align, или "Как (Не) Вертикально Центрировать Содержание" Гэвином Кистнером.

«Как центрировать в CSS» - это отличный веб-инструмент, который помогает найти необходимые атрибуты центрирования CSS для различных ситуаций.


В двух словах (и для предотвращения гниения ссылок) :

  • Встроенные элементытолько встроенные элементы) могут быть выровнены по вертикали в их контексте с помощью vertical-align: middle. Однако «контекст» - это не вся высота родительского контейнера, а высота текстовой строки, в которой они находятся. Пример jsfiddle
  • Для блочных элементов вертикальное выравнивание сложнее и сильно зависит от конкретной ситуации:
    • Если внутренний элемент может иметь фиксированную высоту , вы можете сделать свою позицию absoluteи указать его height, margin-topи topположение. пример jsfiddle
    • Если центрированный элемент состоит из одной строки и его родительская высота фиксирована, вы можете просто установить контейнер line-heightдля заполнения его высоты. Этот метод довольно универсален по моему опыту. пример jsfiddle
    • ... есть еще такие особые случаи.
Конрад Рудольф
источник
142
Проблема с «действительными» решениями (поэтому не с vertical-align: middle) заключается в том, что вам нужно указать фиксированную высоту. Не очень возможно для адаптивного веб-дизайна .
Эмили
1
У меня была такая структура: <div height = "## px"> My Text </ div> Сработало для меня, установите свойство lineHeight, используя то же значение, что и в свойстве div height: '## px' (## потому что это значение динамично в моем случае) спасибо
patricK
8
Это также работает с inline-blockи table-cellэлементами. Если у вас возникли проблемы с этим, попробуйте настроить line-heightэлемент контейнера (т.е. контекст), поскольку он используется в vertical-alignвычислениях линейного блока.
Алекс W
1
css-tricks.com/centering-css-complete-guide <- некоторые хорошие варианты, представленные здесь, все же чаще прибегают к решению «таблица / таблица-ячейка»
shaunhusain
1
Этот инструмент (howtocenterincsss.com) очень хорош, потому что он работал прямо из коробки в моем существующем CSS! Это супер редко. Вспомните старые времена, когда вам приходилось копировать целые таблицы стилей из какого-то примера, иногда даже из примера HTML, а затем удалять и переименовывать элементы один за другим, пока это не то, что мне было нужно. Не дело для этого сайта!
Константин
190

Теперь, когда поддержка flexbox увеличивается, этот CSS, примененный к содержащему элементу, будет вертикально центрировать содержащийся элемент:

.container {        
    display: flex;
    align-items: center;
}

Используйте префиксную версию, если вам также нужно ориентироваться на Explorer 10 и старые (<4.4) браузеры Android:

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}
Э. Серрано
источник
Хорошее решение, спасибо. Можете ли вы предложить, как заставить flexbox отображать горизонтальную полосу прокрутки, если внутренний элемент больше контейнера? (Я пытаюсь сделать внутренний элемент масштабируемым / прокручиваемым внутри контейнера, как canvas в powerpoint)? Это вообще возможно?
Борис Бурков
1
@YazidErman это решение зависит от flexbox, так что нет, только поддержка IE 10 и выше или любой другой современный браузер caniuse.com/#search=flexbox Flexbox отлично подходит для тех случаев, когда он поддерживается, но не везде. Отображаемая таблица и ячейка таблицы, вероятно, являются действительно лучшим решением, контейнер просто должен быть таблицей, центрируемый элемент оборачивается элементом с ячейкой отображаемой таблицы, а затем может просто центрироваться, как указывают некоторые другие ответы.
Shaunhusain
1
Почему мне было так трудно найти>. <Спасибо за ответ! Можно подтвердить, что это работает для меня в сценарии, где другой ответ не сработал.
Майкл МакКенна
1
Полезные CSS трюки руководство по flexbox, а затем посмотрите на align-itemsраздел
icc97
1
В 2020 году мы можем использовать flexbox caniuse.com/#feat=flexbox
tonygatta
116

Я использовал этот очень простой код:

HTML:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

Очевидно, что, используете ли вы .classили #id, результат не изменится.

user2346571
источник
3
Вот полный пример всех девяти возможностей выравнивания (верх-середина-низ и лево-центр-право): jsfiddle.net/webMac/0swk9hk5
webMac
В 2020 году мы можем использовать flexbox caniuse.com/#feat=flexbox
tonygatta
отлично работает для меня
huynq0911
49

Это сработало для меня:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}
Ромен
источник
9
Значит, это больше не «блочный» элемент?
Pacerier
7
Тогда, если вы хотите выровнять по горизонтали margin : 0 auto, это не сработает из-заdisplay: table-cell
Ортомала Локни
48
 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }
Самера Прасад Джаясингхе
источник
7
Я думаю, что это решение является самым быстрым и простым для понимания. Возможно, это потому, что я не был достаточно терпелив, чтобы ухватиться за выбранный ответ. Flexbox все вещи!
модуль
1
Дополнение justify-content: centerисправило мое отсутствие горизонтального центрирования
Самуэль Слейд
22

Техника от моего друга:

HTML:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

ДЕМО здесь

abernier
источник
1
этот метод более подробно описан здесь: css-tricks.com/centering-in-the-unknown
nerdess
18

Чтобы расположить элементы блока по центру (работает в IE9 и выше), требуется оболочка div:

.vcontainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
Blacksonic
источник
2
Этот метод может сделать элементы размытыми из-за того, что элемент размещен на «полупикселе». Решение для этого состоит в том, чтобы установить перспективу элемента. transform: перспектива (1px) translateY (-50%);
Саймон
16

Все они должны быть вертикально выровнены внутри div

Выровняли как ? Вершины изображений выровнены по верху текста?

Одно из изображений должно быть в абсолютном положении внутри div.

Абсолютно позиционируется относительно DIV? Возможно, вы могли бы набросать то, что вы ищете ...?

fd описал шаги для абсолютного позиционирования, а также для настройки отображения H1элемента таким образом, чтобы изображения отображались внутри него. К этому я добавлю, что вы можете выровнять изображения, используя vertical-alignстиль:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

... это объединит заголовок и изображения с выровненными верхними краями. Существуют другие варианты выравнивания; обратитесь к документации . Также может оказаться полезным сбросить DIV и переместить изображения внутри H1элемента - это обеспечивает семантическую ценность для контейнера и устраняет необходимость настраивать отображение H1:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>
Shog9
источник
15

Используйте эту формулу, и она будет работать всегда без трещин:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */
<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

Анита Мандал
источник
2
Я никогда не видел в css такого рода селектор "#outer [id]". Что это должно делать? Что если у меня будет класс вместо идентификатора?
Алекса Адриан
12

Почти все методы должны указывать высоту, но часто у нас нет никаких высот.
Итак, вот 3-х строчный трюк CSS3, который не требует знать высоту.

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

Это поддерживается даже в IE9.

с его префиксами поставщика:

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

Источник: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Shadoweb
источник
но это, кажется, работает только тогда, когда высота родительского элемента фиксирована. свойство top с процентным значением работает только в контейнере с фиксированной высотой, верно?
ucdream
Да, это работает только в некоторых случаях, позже у меня были проблемы с этими методами ... Дело в том, чтобы иметь как можно больше возможностей, и как только вам понадобится один, вы тестируете их все, пока не получите хороший, потому что все методы есть вещи, которые не работают в конкретном случае ...
Shadoweb
12

Двумя способами вы можете выровнять элементы по вертикали и по горизонтали

  1. Bootstrap 4
  2. CSS3

введите описание изображения здесь

1. Bootstrap 4.3.X

для вертикального выравнивания: d-flex align-items-center

для горизонтального выравнивания: d-flex justify-content-center

.container {
    height: 180px;
    width:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center bg-info container">
  <div class="bg-light p-2">I am in Center</div>
</div>

2. CSS3

.container {
    display: flex;
    align-items: center;  // verticall center
    justify-content: center; // horizontally center

    background-color: #17a2b8;
    height: 180px;
    width:100%;
}

.child {
  background-color: #f8f9fa;
  padding: 0.5rem;
}
<div class="container">
  <div class="child">I am in Center</div>
</div>

Wasif
источник
1
Оба способа в основном одинаковы, так как Bootstrap использует одинаковые атрибуты flex в своих классах.
Mx.
Бутстрап не волшебство. На него распространяются те же ограничения CSS, которые влияют на всех. Это просто скрывает то, что делает от avg. пользователь.
JasonGenX
10

Мой трюк заключается в том, чтобы поместить в div таблицу с 1 строкой и 1 столбцом, установить 100% ширины и высоты, а также свойство vertical-align: middle.

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

Скрипка: http://jsfiddle.net/joan16v/sbqjnn9q/

joan16v
источник
7
Это кажется лучшим способом избежать царапин на голове. Я все еще не понимаю, почему у CSS нет стандарта вертикального выравнивания.
Кокодоко
5

# 3 способа сделать дочерний центр центром в родительском элементе div

  • Абсолютный метод позиционирования
  • Метод Flexbox
  • Преобразовать / Перевести Метод

    введите описание изображения здесь

    демонстрация

/* 1st way */
.parent1 {
  background: darkcyan;
   width: 200px;
   height: 200px;
   position: relative;
}
.child1 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px;
}

/* 2nd way */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  height: 200px;
  width: 200px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}

/* 3rd way */
.parent3 {
  position: relative;
  height: 200px;
  width: 200px;
  background: darkcyan;
}
.child3 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="parent1">
  <div class="child1"></div>
</div>
<hr />

<div class="parent2">
  <div class="child2"></div>
</div>
<hr />

<div class="parent3">
  <div class="child3"></div>
</div>

Вахид Ахтар
источник
4

Используя CSS для вертикального центра, вы можете позволить внешним контейнерам действовать как таблица, а содержимое - как ячейка таблицы. В этом формате ваши объекты будут оставаться в центре. :)

В качестве примера я вложил несколько объектов в JSFiddle, но основная идея такова:

HTML

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS

 .circle {
   /* act as a table so we can center vertically its child */
   display: table;
   /* set dimensions */
   height: 200px;
   width: 200px;
   /* horizontal center text */
   text-align: center;
   /* create a red circle */
   border-radius: 100%;
   background: red;
 }

 .content {
   /* act as a table cell */
   display: table-cell;
   /* and now we can vertically center! */
   vertical-align: middle;
   /* some basic markup */
   font-size: 30px;
   font-weight: bold;
   color: white;
 }

Пример нескольких объектов:

HTML

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

Результат

Результат

https://jsfiddle.net/martjemeyer/ybs032uc/1/

Хенк-Мартейн
источник
3

По умолчанию h1 является элементом блока и будет отображаться в строке после первого img, а второй img появится в строке, следующей за блоком.

Чтобы это не происходило, вы можете установить h1 для поведения встроенного потока:

#header > h1 { display: inline; }

Что касается абсолютного позиционирования img внутри div , вам нужно установить содержащий div для «известного размера», прежде чем это будет работать должным образом. По моему опыту, вам также нужно изменить атрибут позиции с значения по умолчанию - положение: относительный работает для меня:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

Если вы можете заставить это работать, вы можете попытаться постепенно удалять атрибуты height, width, position из div.header, чтобы получить минимальные обязательные атрибуты для получения желаемого эффекта.

ОБНОВИТЬ:

Вот полный пример, который работает на Firefox 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>
Майк Тунниклифф
источник
4
Я должен отметить, что наличие правильного DOCTYPE иногда может сильно повлиять на то, как CSS будет отображаться, особенно в Internet Explorer. Я бы порекомендовал вам выбрать DOCTYPE, который, как известно, соответствует строгим стандартам, чтобы вы могли ожидать более согласованного поведения между браузерами.
Майк Тунниклифф,
2
Я бы не «ожидал» какой-либо согласованности между браузерами ... единственный способ убедиться в этом - это проверить: /
Cocowalla
3

Мы можем использовать функцию вычисления CSS, чтобы вычислить размер элемента, а затем соответствующим образом расположить дочерний элемент.

Пример HTML:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

И CSS:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;

}
.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}
a {
    color: white;
    text-decoration: none;
}

Демо создано здесь: https://jsfiddle.net/xnjq1t22/

Это решение хорошо работает с отзывчивым div height и widthтакже.

Примечание. Функция calc не проверяется на совместимость со старыми браузерами.

Dashrath
источник
3

На сегодняшний день я нашел новый обходной путь для вертикального выравнивания нескольких текстовых строк в div с использованием CSS3 (и я также использую систему сетки bootstrap v3 для украшения пользовательского интерфейса), как показано ниже:

.immediate-parent-of-text-containing-div{
    height: 50px;         /* or any fixed height that suits you.*/
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

Насколько я понимаю, непосредственный родительский элемент текста, содержащего элемент, должен иметь некоторую высоту. Я надеюсь, что это вам тоже поможет. Спасибо!

Шивам
источник
Очень чистое решение. Этот работал для меня хорошо.
Акалонда
2

Мой новый любимый способ сделать это с помощью сетки CSS:

/* technique */

.wrapper {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}

/* visual emphasis */

.wrapper {
  border: 1px solid red;
  height: 180px;
  width: 400px;
}

img {
  width: 100px;
  height: 80px;
  background: #fafafa;
}

img:nth-child(2) {
  height: 120px;
}
<div class="wrapper">
  <img src="https://source.unsplash.com/random/100x80/?bear">
  <img src="https://source.unsplash.com/random/100x120/?lion">
  <img src="https://source.unsplash.com/random/100x80/?tiger">
</div>

Стивен
источник
1

Просто используйте таблицу из одной ячейки внутри div! Просто установите высоту ячейки и таблицы с 100%, и вы можете использовать выравнивание по вертикали.

Стол из одной ячейки внутри div обрабатывает выравнивание по вертикали и обратно совместим с каменным веком!

Джоэл Моисей
источник
0

Я использую следующее решение (без позиционирования и без высоты строки), так как в течение года оно работает с IE 7 и 8.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>
Арш
источник
0

Это мое личное решение для элемента i внутри div

Пример JSFiddle

HTML

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}
danigonlinea
источник
0

Для меня это сработало так:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

Элемент «a» преобразован в кнопку с использованием классов Bootstrap, и теперь он центрируется по вертикали внутри внешнего «div».

BernieSF
источник
0

используя display flex, сначала вам нужно обернуть контейнер элемента, который вы хотите выровнять.

<div class="outdiv">
      <div class="indiv">
         <span>test1</span>
         <span>test2</span>
      </div>
    </div>

затем примените следующий CSS к оболочке div или outdiv в моем примере

.outdiv {
    display: flex;
    justify-content:center;
    align-items:center;
}
Деннис Дон
источник
Код только ответы не рекомендуется. Пожалуйста, добавьте некоторые объяснения относительно того, как это решает проблему, или как это отличается от существующих ответов. Из обзора
Ник
-3

Просто это:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

Стол из одной ячейки внутри div обрабатывает выравнивание по вертикали и обратно совместим с каменным веком!

Джоэл Моисей
источник
-3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>
pr0gg3r
источник
-4

Вот еще один (отзывчивый) подход:

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz/

Питер Мортенсен
источник
-4

Я парень .NET, который только начал заниматься веб-программированием. Я не использовал CSS (ну, немного). Я использовал немного JavaScript для выполнения вертикального центрирования вместе с функцией jcuery .css.

Я просто публикую все из моего теста. Это, вероятно, не слишком элегантно, но пока работает.

script.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script type="application/javascript">
            function centerElementVertically(id) {
                var btnDivHeight = $(id).outerHeight();
                var prnt = $(id).parent();
                var parentHeight = prnt.outerHeight();

                var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
                var newPct = newTop / parentHeight+'%;';

                $(id).css({top: newTop});
            }

            function showAlert(){
                alert("alert");
            }

            $(window).load(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            });

            $(window).resize(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            })
        </script>

        <style>
            #div1 {
                position:relative;
                height: 33%;
                background-color: red;
                overflow: hidden;
            }
            #buttonLeft {
                position: relative;
                float:left;
                width:50%;
                height:20%;
                background-color: cornsilk;
            }
            #buttonRight {
                position: relative;
                float:right;
                width:50%;
                height:50%;
                background-color: darkorchid;
            }
            #testerbtn {
                position: absolute;
            }
            body {
                background-color: aqua;
            }
        </style>

        <body>
            <div id="div1">
                <div id="buttonLeft">
                    <button id="testerbtn">tester</button>
                </div>
                <div id="buttonRight"></div>
            </div>
        </body>
    </head>
</html>
tronious
источник
7
Вы учите новых веб-разработчиков тому, как поступать неправильно, HTML предназначен для определения содержимого, CSS предназначен для стилизации HTML, а JavaScript предназначен для манипулирования обоими во время выполнения в зависимости от условий. Их смешивание может быстро привести к спагетти и высокопроизводительному коду
OverCoder
-8
<div id="header" style="display: table-cell; vertical-align:middle;">

...

или CSS

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

Покрытие браузера

dimarzionist
источник
1
Свойство вертикального выравнивания не применяется, поскольку div по умолчанию является display: block, и, похоже, ничего не было сделано для его изменения.
Квентин
3
Видимо дисплей был обновлен до table-cell, что делает vertical-align: middle;работу. Более того, он работает без вложенного div-оболочки / буфера и работает как с текстом, так и с изображениями (или обоими), и вам не нужно изменять свойства позиции.
MSpreij
3
Этот работает. Он изменяет отображение на ячейку таблицы, которая принимает свойство вертикального выравнивания. Не знаю, почему люди так голосуют.
texasbruce
1
да, насколько я знаю, это наименее навязчивый способ центрировать все по вертикали в div. +1
ПМА
Хорошо, может быть, я был слишком быстр с моими выводами ... Добавление отображения: ячейка таблицы разбивает поле div и дополнительно отображает рамку за пределами div, рамка в сочетании с рамкой-радиусом отображает закругленные углы внутри границы div - наружу
Pma