Варианты горизонтального выравнивания блоков и картинок по центру справа слева

Содержание:

Способ 0: 100% width/height
5-ый метод
- Минусы
transform: translate()
5 ответов
Ставим картинку по центру с помощью flex
Обтекание рисунка текстом
Как установить отступ от изображения до текста
Советы по центрированию с помощью CSS
Как выровнять изображение по центру в css
- Пример кода как выровнять картинку по центру
Использование отступов
Выравнивание изображения по центру по вертикали
Вариант 1, Шаг 1: Возьмите необходимые URL-адреса
Главные инструменты для работы с изображениями
Есть два типа позиционирования
2-ой метод
- Минусы

Способ 0: 100% width/height

Первый способ заключается в использовании значения 100% для одного из параметров тега img – ширины или высоты. При этом второй параметр должен быть установлен в auto для сохранения пропорций изображения. Картинка растянется до размера контейнера по одному из измерений, а второе значение будет рассчитано автоматически. В результате по краям картинки могут образоваться поля, но она поместится в отведённой области целиком, без обрезки.

<html>
  <head>
    <style>
      .wrapper {
        width: 300px;
        height: 300px;
        border: 5px solid #515151;
      }
      .exmpl {
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .exmpl img {
        height: 100%;
        width: auto;
      }
    </style>
  </head>

  <body>
    <div class="wrapper exmpl">
      <img src="/images/braineater.png">
    </div>
  </body>
</html>

Так как при высоте 100% от высоты контейнера изображение вылезает за пределы этого контейнера по ширине, для обрезки лишнего используется свойство overflow со значением hidden. При этом, если мы хотим, чтобы в видимую область попала центральная часть изображения, его надо выровнять по центру контейнера. Проще всего это сделать задав контейнеру display: flex, и далее позиционировать изображение по вертикали и горизонтали с помощью свойств justify-content и align-items.

Недостатком такого метода является то, что если часть изображений вытянута горизонтально, а часть вертикально, то одни из них заполнят область целиком, тогда как другие образуют поля.

Чтобы избавиться от полей можно заменить свойства width и height на min-width и min-height (при этом ширина и высота по умолчанию примут значения auto). Тогда вне зависимости от ориентации изображения, оно заполнит область целиком.

Важно: если вы используете выравнивание с помощью flex-контейнера, добавьте flex-shrink: 0, чтобы запретить автоматическое масштабирование изображения.

<style>
  .wrapper {
    width: 300px;
    height: 300px;
    border: 5px solid #515151;
  }
  .exmpl {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .exmpl img {
    min-width: 100%;
    min-height: 100%;
    flex-shrink: 0;
  }
</style>

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

Подобным образом можно вырезать только часть изображения, увеличивая или уменьшая масштаб изображения и контролируя смещение с помощью свойства margin.

<style>
  .wrapper {
    width: 300px;
    height: 300px;
    border: 5px solid #515151;
  }
  .exmpl {
    overflow: hidden;
  }
  .exmpl img {
    width: auto;
    height: 200%;
    margin: -60px 0 0 -240px;
  }
</style>

5-ый метод

Css — выравнивание по центру

С помощью этого метода можно выровнять по центру одну строку текста. Просто устанавливаем высоту текста (line-height) равной высоте элемента (height). После этого строка будет выведена по центру.

Минусы

Работает только с текстом (не работает с блочными элементами).
Если текста больше чем одна строка, то выглядит очень плохо.

Этот способ очень полезен для небольших элементов, например чтобы вырвнять по центру текст в кнопке или в текстовом поле.

Теперь вы знаете как добиться вертикального выравнивания по центру, давайте сделаем простой web-сайт, который, в конце-концов будет выглядеть так:

transform: translate()

Как создать мем: 10 генераторов забавных картинок

Свойство CSS позволяет двигать, вращать, изменять размер и форму элемента. Этот инструмент настоящий must have для создания современных адаптивных и интерактивных дизайнов. Поэтому ему будет посвящена отдельная статья (а может и две 😉

В рамках этой статьи рассмотрим использование свойства c функцией в качестве значения. Суть метода сводится к следующему:

Обратите внимание, что родительскому элементу нужно задать иначе дочерний элемент будет выравниваться относительно ближайшего родителя с или, если такого нет, — относительно страницы. Итак, мы выровняли элемент по центру

Или не совсем по центру? Дело в том, что по центру выравнивается левый верхний угол блока (так сказать, начало его координат). Если блок имеет фиксированный размер и он нам известен, можно сдвинуть его (блок) на расстояние равное половине размера при помощи свойства

Итак, мы выровняли элемент по центру. Или не совсем по центру? Дело в том, что по центру выравнивается левый верхний угол блока (так сказать, начало его координат). Если блок имеет фиксированный размер и он нам известен, можно сдвинуть его (блок) на расстояние равное половине размера при помощи свойства .

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

5 ответов

Красивые гифки. подборка из 95 разных анимированных картинок gif

вместо таблицы, вы можете достичь того же с div и img

Рабочая Демо

HTML-код

в CSS

html, body{ height: 100%; margin:0; padding:0;}div { position:relative; height: 100%; width:100%;}div img { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;}

попробуйте фоновое изображение с background-position:50% 50%

http://jsfiddle.net/Zword/Ve6yz/3/

html, body{height: 100%;width:100%;margin:0;padding:0;background:url(http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png);background-position:50% 50%;background-repeat:no-repeat;}

есть простой и легкий способ :

.centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);}

это, кажется, работает

в CSS

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

HTML-код

Если вам интересно, что я изменил, то позвольте мне сказать вам даже мне интересно то же самое

но я думаю, что делает тело и HTML-тег более общем помогает…

Ставим картинку по центру с помощью flex

Следующий способ поставить картинку по центру — это display со значением «flex».

Для того, чтобы поставить картинку по центру нам понадобится, опять картинка img с id + оберенем в div с классом class

<div class=»kartinka_po_tsentru_flex»>
<img id=»kartinka_po_tsentru_flex» src=»https://dwweb.ru/путь/new_logo.png»>
</div>
Css:

Немного стилей:

Соберем весь код вместе: Html:
<div class=»kartinka_po_tsentru_flex»>
<img id=»kartinka_po_tsentru_flex» src=»https://dwweb.ru/путь/new_logo.png»>
</div>
Css:
<style>
.kartinka_po_tsentru_flex {
display: flex;
height: 200px;
background: burlywood;
}
#kartinka_po_tsentru_flex {
margin: auto;
}
</style>

Обтекание рисунка текстом

Обтекание картинки текстом — один из популярных приемов верстки веб-страниц,
когда изображение располагается по краю окна браузера, а текст обходит его с
других сторон (рис. 2). Для создания обтекания изображения текстом существует
несколько способов, связанных, как с возможностью тегов HTML, так и с применением
стилей.

Рис. 2. Рисунок выровнен по левому краю и обтекается текстом справа

Так, у тега <img> есть атрибут align,
который определяет выравнивание изображения. Этот атрибут задает, возле какого
края окна будет располагаться рисунок, одновременно устанавливая и способ обтекания
текста. Чтобы выровнять изображение по правому краю и задать обтекание слева,
используют значение right, для выравнивания по
левому краю применяют left. Атрибут align
часто используют в связке с другими атрибутами тега <img> —
vspace и hspace. Они
определяют расстояние от обтекаемого текста до изображения. Без этих атрибутов
изображение и текст будут слишком плотно прилегать друг к другу (пример 2).

Пример 2. Использование свойств тега <img>

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

Для обтекания картинки текстом также можно применить стилевое свойство float.
Значение right будет выравнивать изображение по
правому краю окна браузера, а текст заставляет обтекать рисунок слева (пример 3).
Значение left, наоборот, выравнивает изображение
по левому краю, а текст — справа от рисунка.

Пример 3. Использование стилей

В данном примере к тегу <img> добавляется класс
fig, для которого установлено выравнивание по правому
краю и, соответственно, обтекание картинки слева. Чтобы текст не прилегал плотно
к изображению, применяются свойства padding-left
и padding-bottom.

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

Для любого изображения можно задать невидимые отступы по горизонтали и вертикали. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не «наезжал» плотно на изображение, необходимо вокруг него добавить пустое пространство.

HSPACE. Устанавливает горизонтальный отступ от изображения до окружающего текста.

VSPACE. Устанавливает вертикальный отступ от изображения до окружающего текста.

Для примера увеличим отступ по горизонтали для первого изображения:

 <HTML>
<HEAD>
<TITLE>
Описание Ежика
</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">Ёжик</H1>
<P ALIGN="JUSTIFY">
<IMG SRC="images/ez_2.png" WIDTH="100" ALIGN="LEFT" HSPACE="50">
Ёжик – лучший друг Кроша. Не по детски серьёзный, внимательный и совестливый.
В отличии от Кроша, Ёжик хорошо воспитан и не такой активный как его друг.
Имеет хорошую способность мирить тех кто в ссоре. Очень чувствительный к окружающим.
</P>
<P ALIGN="JUSTIFY">
Застенчив и скромен.
</P>
<P ALIGN="JUSTIFY">
Любит когда вещи лежат на своих местах и не любит беспорядок.
Всегда помогает своему лучшему другу, даже когда он не прав.
</P>
<IMG SRC="images/ez_3.png" WIDTH="100">
<IMG SRC="images/ez_4.png" WIDTH="100">
</BODY>
</HTML>

В браузере:

Советы по центрированию с помощью CSS

HTML используется для создания структуры, а CSS определяет стили. Так как центрирование – это визуальная характеристика, то оно осуществляется с помощью каскадных стилей.

Выравнивание текста по центру CSS

Не знаете как выровнять текст по центру CSS? Проще всего центрировать текст на веб-странице. Чтобы это сделать, нужно всего одно свойство: HTML text align:

p.center { text-align: center; }

С помощью этой строки кода каждый параграф с классом center будет центрирован горизонтально внутри своего родительского элемента.

Применения этого класса:

<p class="center">This text is centered.</p>

При выравнивании текста по центру при помощи свойства text-align помните, что он будет центрирован внутри содержащего его контейнера, и необязательно относительно всей страницы.

Выровнять по центру CSS блоки контента

Блоками являются любые элементы на странице, которые устанавливаются как элементы уровня блока и имеют определенную ширину. Часто такие блоки создаются с помощью <div>.

Наиболее распространенный способ центрирования блоков – это задать для левого и правого отступов значение auto:

div.center {
 margin: 0 auto;
  width: 80em;
}

Это сокращенная форма свойства margin установит для верхнего и нижнего отступа значение , а левый и правый отступы будут использовать значение auto. Таким образом занимается все доступное место и делится равномерно между двумя сторонами, что равносильно HTML div align.

Применение в HTML:

<div class="center">This entire block is centered,
but the text inside it is left aligned.</div>

Поскольку блок имеет определенную ширину, он будет центрирован внутри содержащего его элемента. Текст, находящийся в этом блоке, будет выровнен не по центру, а по левому краю. Так как по умолчанию в браузерах текст выравнивается по левому краю. Чтобы выровнять по центру текст, используйте свойство text-align, которое мы описывали ранее.

Как выровнять картинку по центру в HTML

Большинство браузеров отобразят изображения по центру при использовании свойства HTML text align. Но не стоит полагаться на этот метод, так как он не рекомендован W3C.

Но как выровнять картинку по центру CSS? Для этого следует явно указать браузеру, что изображение является элементом уровня блока. Вот код CSS для этого:

img.center {
 display: block;
  margin-left: auto;
  margin-right: auto;
}

Вот HTML код для изображения, которое нужно центрировать:

<img src="blwebcam-sample.jpg" alt="Suni" class="center">

Также можно центрировать объекты с помощью встроенного CSS:

<div style="text-align: center;">

Вертикальное центрирование элементов

HTML vertical align всегда было проблематичным в веб-дизайне, но с выходом спецификации CSS Flexible Box Layout Module в CSS3, появилось решение для этой задачи.

Вертикальное выравнивание работает также как и горизонтальное, описанное выше. Свойство vertical-align со значением middle:

.vcenter {
  vertical-align: middle;
}

Недостатком этого подхода является то, что не все браузеры поддерживают CSS FlexBox. Если есть проблемы с более ранними версиями браузеров, W3C рекомендует центрировать текст вертикально в контейнере, используя следующий метод:

Поместите элементы, которые нужно центрировать, внутрь элемента-контейнера, такого как div;
Задайте минимальную высоту элементу-контейнеру;
Объявите элемент-контейнер;
Установите для HTML vertical align значение middle.

Например:

.vcenter {
  min-height: 12em;
  display: table-cell;
  vertical-align: middle;
}

HTML код:

<div class="vcenter">
<p>This text is vertically centered in the box.</p>
</div>

Как выровнять изображение по центру в css

Для выравнивания изображения по центру в css используются свойства:

1. display(вид визуального отображения).
По умолчанию границы элемента картинки равны размерам(ширина, высота) и это свойство не позволяет ее отображать по центру. Поэтому
для начала необходимо превратить картинку в блочный элемент, который будет занимать всю ширину родительского блока, при сохранении
размеров изображения. Это позволит отобразить изображение по центру его же блока. Для задания картинке свойства блочного элемента,
занимающего всю ширину, используется свойство display: block.

2. margin(внешние отступы).
У свойства margin: y1 x1 y2 x2, значения y1 x1 y2 x2 отвечают за отступ сверху, справа,
снизу и слева соответственно. Если вместо
отступов x1 и x2 написать auto в css, то будет выравнивание картинки по центру относительно горизонтальной плоскости.

Пример кода как выровнять картинку по центру

Результат в браузереКод страницы
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″ />
<title>Тестовая страница</title>
</head>
<body>
<img src=»my_img/1.jpg» style=»margin:0px auto 0px auto; display:block» >
</body>
</html>

Использование отступов

Если добавить отступ к слою слева с помощью свойства margin-left,
то визуально слой сместится на указанное значение вправо. Зная ширину слоя,
его можно сместить так, чтобы слой располагался по центру веб-страницы. Для
чего от 100%, составляющих общую доступную ширину, надо отнять ширину слоя
в процентах и полученное значение разделить пополам. Результат и будет значением
свойства margin-left (пример 1).

Пример 1. Использование margin-left

Как вариант, можно не указывать ширину, а регулировать ее с помощью отступа
слева и справа (пример 2).

Пример 2. Использование отступов

В данном примере показано размещение слоя шириной 40% по центру.
Хотя сама ширина никак напрямую не задается, она определяется значением свойств
margin-left и margin-right. Они устанавливают отступ слева и справа,
чтобы слой располагался по середине, их значения должны быть равны.

Следующий способ более универсален и уже не зависит от того, какие единицы
измерения используются для установки ширины. Для этого требуется задать отступ слева и справа для слоя равным auto через стилевые свойства margin-left и margin-right или универсальное свойство margin (пример 3).

Пример 3. Применение значения auto

В данном примере ширина слоя устанавливается 400 пикселов и выравнивается
по центру с помощью значения 0 auto свойства margin. Первый аргумент устанавливает нулевой отступ одновременно сверху и снизу от слоя, а второй аргумент выравнивает слой по центру горизонтали окна браузера.

Выравнивание изображения по центру по вертикали

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

Для этого нам нужно сделать два шага. Оберточный элемент должен отображаться как ячейка таблицы, а выравнивание по вертикали должно быть установлено на середину. В нашем примере мы устанавливаем фиксированную высоту для контейнера, чтобы убедиться, что он выше, чем наша картинка.

<div class=”verticalcenter”> <img src=”//msiter.ru/image.jpg” alt=”отцентрированное изображение” /></div><style>.verticalcenter { display: table-cell; height: 400px; vertical-align: middle;}</style>

Вариант 1, Шаг 1: Возьмите необходимые URL-адреса

Чтобы завершить этот шаг, изображение, которое вы хотите сделать кликабельным, уже должно быть загружено на ваш сайт.

Чтобы создать необходимый HTML-код, нужно собрать воедино два фрагмента информации. Я рекомендую сначала открыть новый текстовый файл, куда можно будет вставлять эти URL-адреса.

Вот что нужно:

1. URL-адрес целевой страницы

Адрес страницы / поста / сайта, куда вы хотите перенаправить пользователя после того, как он кликнет по изображению. Для этого перейдите на страницу, которую вы хотите использовать и скопируйте URL из адресной строки браузера:

URL-адрес

https://amylynnandrews.com/how-to-start-a-blog/

После того, как вы скопируете URL-адрес целевой страницы, вставьте его в открытый текстовый документ, чтобы не потерять, когда скопируете следующий URL-адрес.

2. URL-адрес изображения

Это URL-адрес, определяющий, где находится изображение в интернете. Перед тем, как сделать ссылку на картинку с компьютера, нужно понять, что все изображения, доступные в Сети, размещаются где-то. Они должны быть доступны для просмотра.

Самый простой способ найти URL-адрес изображения — это перейти на веб-страницу, на которой оно выводится. Например, если вы уже загрузили изображение на сайт, перейдите на страницу, где оно отображается.

Если вы пользователь Windows, кликните по изображению правой кнопкой мыши. После этого появится так называемое контекстное меню. В нем необходимо выбрать пункт «Скопировать URL-адрес изображения»;
Если вы пользователь Mac, кликните по изображению, удерживая нажатой клавишу control. После этого появится небольшое меню, в котором нужно будет выбрать пункт «Скопировать адрес изображения».

URL-адрес изображения будет сохранен в буфере обмена, и вы сможете вставить его.

Я прокрутила страницу вверх, навела курсор мыши на изображение и нажала клавишу control, так как я работаю на Mac

Обратите внимание, что я выбрала в меню пункт Copy Image Address:. URL-адрес

URL-адрес

https://amylynnandrews.com/wp-content/uploads/2016/01/how-to-create-a-blog.jpg

Если вы являетесь пользователем WordPress, существует альтернативный способ поиска URL-адреса изображения. В панели администрирования WordPress перейдите в меню Медиа> Библиотека медиа. Используйте окно поиска или прокрутите окно вниз, чтобы найти изображение. Нажмите на него. В появившемся окне выделите и скопируйте весь фрагмент кода в поле URL.

Главные инструменты для работы с изображениями

padding
margin
float
text-align

Начнем разбор полетов с последнего элемента.

Text-align обычно используют для выравнивания текста, однако он также предусмотрен и для форматирования расположения изображений. В своем арсенале text-align имеет такие ключевые слова, как center – центрирует объект, right и left – выравнивают по правому или левому краю соответственно, justify – выравнивает по ширине блока.

Также начиная с css3 появились такие параметры как start и end. Они функционируют почти также, как right и left, однако выравнивание происходит автоматически в зависимости от правил написания текста (справа налево или слева направо).

Очень полезным свойством является float. С его помощью можно указать как именно должна обтекаться фотография контентом. Так, при указании right выбранный элемент размещается справа, а другие объекты обтекают его с левой стороны.

При указании left думаю вы и сами догадались, что произойдет – эффект будет зеркальным.

Также можно указать none – отменить обтекание и inherit – унаследовать характеристики предка.

А сейчас разберем, что же такое padding и margin, а также их отличия.

Это очень гибкие элементы. Условия можно задавать в разных единица измерения как одновременно для всех сторон, так и для каждой отдельно. К тому же дописывая через дефис название стороны (например, для нижнего внутреннего отступа padding- bottom) можно добиться того же эффекта.

Есть два типа позиционирования

Позиционирование статического (static) типа и относительного (relative).

Статическое позиционирование содержит только одно значение . Оно задано по умолчанию, поэтому вы редко видите его в параметрах.

Относительное позиционирование содержит следующие значения: , и . Эти виды позиционирования взаимодействуют друг с другом и позволяют вам двигать элементы интересным образом.

Статическое позиционирование

Давайте избавимся от этой скукоты пораньше. Не смотря на то, что вы редко встретите объявление статической позиции в коде, нам стоит начать изучение позиционирования именно с этого.

.ourBox {
  position: static;
}

Статическое позиционирование установлено по умолчанию для каждого элемента.

Относительное позиционирование

С относительным позиционированием вещи становятся куда интереснее.

Доступные для нас значения: , и . Они зовутся относительными, потому что они позволяют элементам смещаться относительно их самих же, их родителей или целого окна просмотра.

Каждое позиционирование относительного типа может:

Быть сдвинутым из нормального потока позиционирования с помощью свойств смещения (offset properties), таких как top, right, bottom и left.
Создать условия для относительного позиционирования, которые позволяют размещать дочерние элементы с относительно позиции их родителя.

Давайте рассмотрим поближе каждое из трёх относительных позиционирований.

Значение Relative

Возможно вы видели это раньше. Код выглядит следующим образом:

.ourBox {
  position: relative;
}

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

Внесём ясность. Когда вы используете свойства смещения для элемента со свойством , то место, которое он занимает в документе, не смещается.

Посмотрите на пример ниже.

.ourBox {
  position: relative;
  top: 20px;
  left: 20px;
}

Наш элемент сдвинут со своей оригинальной позиции с помощью свойств смещения.

Мы видим, что верх нашего элемента был сдвинут на 20 пикселей, относительно того, где он был расположен в нормальном потоке. Тоже самое было сделано для левой стороны.

Обратите внимание, что позиция коробки с обоих сторон не изменилась. Помните, что когда вы смещаете элемент со свойством , то место, которое он занимает, не смещается, поэтому это не производит никакого эффекта на элементы вокруг

Представьте, что у нашей коробки есть душа, которая может сдвинуться куда бы то ни было, но всегда относительно того места, где она была изначально.

Значение Absolute

Закрепление.

Свойство в основном делает то же самое, что и свойство , но с двумя ключевыми отличиями:

Элемент забирается из нормального потока и не занимает места.
Элемент позиционируется относительного ближайшего родительского элемента со свойством relative.

Давайте посмотрим:

.ourBoxesParent {
  position: relative;
}
.ourBox {
  position: absolute;
  top: 0;
  left: 0;
}

Мы забираем нашу коробку из нормального потока и сдвигаем её относительно ближайшего родительского элемента со свойством relative.

Мы создали оболочку со свойством для трёх наших коробок. Также мы изменили свойство нашей коробки на

Обратите внимание на то, что место, которое мы занимали до этого, теперь сжалось, а две серые коробки теперь отображаются рядом

Значение Fixed

Теперь, когда мы знаем о свойстве , то нам будем проще разобраться с .

представляет из себя то же самое, что и , но с одной ключевой разницей:

Элемент позиционируется относительно окна просмотра.

.ourBox {
  position: fixed;  
  top: 0;
  left: 0;
}

Когда мы применили свойство position: fixed, наша коробка сдвинулась в левый верхний угол окна просмотра.Это значит, что даже если страница будет прокручиваться, то наша маленькая коробочка останется на своём месте. Когда мы применили свойство , наша коробка сдвинулась в левый верхний угол окна просмотра.

Шпаргалка

Для быстрой справки подытожим всё, что мы узнали.

Свойство по умолчанию для всех элементов.
Размещает элементы в обычном потоке.

Может быть смещено с помощью свойств: top, right, bottom и left.
Смещается относительно самого себя.
Создаёт условия относительного позиционирования для дочерних элементов.

Может быть смещено с помощью свойств: top, right, bottom и left.
Смещается относительно ближайшего родительского relative-элемента.
Создаёт условия относительного позиционирования для дочерних элементов.

Может быть смещено с помощью свойств: top, right, bottom и left.
Смещается относительно окна просмотра.
Создаёт условия относительного позиционирования для дочерних элементов.

Перевод статьи Jacob GreenawayUnderstanding Position in CSS

2-ой метод

Этот метод использует абсолютное позиционирование div-а, которому top устанавливается в 50%, а верхний отступ (margin-top) минус половине высоты контента. Это подразумевает, что объект должен иметь фиксированную высоту, которая определена в стилях CSS.

Поскольку высота фиксированная, вы можете установить overflow:auto; для div-а содержащего контент, таким образом, в случае если контент не будет влазить, то появятся скролл-бары.

Минусы

Когда не достаточно места, контент пропадает (например, div находится внутри body, а пользователь уменьшил окна, в этом случае скролл-бары не появятся.