Как выровнять абсолютный блок по центру css
Перейти к содержимому

Как выровнять абсолютный блок по центру css

  • автор:

Как выровнять css position absolute по центру

Привет. Расскажу о том, как в вёрстке выровнять блок с абсолютным позиционированием по центру, чтобы он стоял ровно по центру экрана.
Для этого нам нужен сам блок, скажем, размером 600×400 пикселей.
Сам код выглядит так:

Я нахожусь ровно по центру экрана

#centerred_block

Самое важное выделено в css. Суть такая:

  1. Определяете ширину и высоту блока. В нашем случае, width: 600px; height: 400px;
  2. Позиционируете блок position:absolute , установив его на уровень top:50%; left: 50%
  3. Выравниваете блок по горизонтали, сдвинув его влево на половину ширины блока. В нашем случае, margin-left: -300px;
  4. Выравниваете блок по вертикали, сдвинув его вверх на половину высоты блока. В нашем случае, margin-top: -200px;

На результат можно глянуть на JsFiddle

Выравнивание блока div со свойством position:absolute или fixed по центру.

Сегодня урок на тему выравнивания блоков div с помощью технологии CSS по центру.

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

Когда блоки идут в нормальном потоке, выровнять один, по центру, относительно родительского блока, в котом он находиться, не составляет особого труда.

Для этого используется стандартная CSS конструкция margin:auto.

Но, что делать, если блок, который нужно выровнять по центру имеет абсолютное (absolute) или фиксированное положение (fixed). Такая ситуация иногда бывает.

Т.е. в данном случае наш пример принимает следующий вид.

Есть еще более современное решение этой проблемы — использование flexbox.

position:relative; — у родительского блока было добавлено, чтобы отсчет шел именно с него, а не с тэга

position:absolute; — собственно говоря, само абсолютное позиционирование.

2016-04-08_06-20-14

После произведенной манипуляции margin:auto работать уже перестает.

Как быть? Как можно снова выровнять блок по центру?

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

left:50%; — смещаем блок относительно родительского на 50% влево.

margin-left:-150px; — т.к. отсчет идет с левого верхнего края блока, то для полной ровности, половину блока нужно сместить влево, что мы и делаем отрицательным отступом.

2016-04-08_06-21-12

Если ширина блока задается в процентах, то решение может быть следующим:

Если по центру нужно выровнять строку с текстом:

Строка текста

Дело в том, что, когда блоку присваивается свойство с position:absolute. Ширина блока с значением width:auto по умолчанию, становиться равной содержимому. Поэтому свойство text-align не будет работать. Чтобы все начало работать, нужно принудительно увеличить ширину до 100%.

Все, что было сказано выше про position:absolute аналогично можно применить и к блокам, которые имеют position: fixed.

Есть еще более современное решение этой проблемы — использование flexbox.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

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

Пусть у нас есть элемент div, внутри которого есть другой div:

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

Как выровнять блок по горизонтали?

1. Выравнивание по горизонтали при помощи фиксированных отступов

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

(ширина_внешнего_блока — ширина_внутреннего_блока) / 2

И указать в стилях конкретные значения:

.box < width: 1000px; >.box-content < width: 500px; margin-left: 250px; /* отступ справа вычисляется сам */ >

То же самое возможно использовать и с процентами, ширина внешнего блока при этом принимается за 100%: например, ширина внутреннего блока 60%, значит размер отступов будет равен 20%:

.box-content

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

.box-content

2. Горизонтальное выравнивание при помощи произвольных отступов

Если внутренний блок имеет фиксированную ширину, то чтобы его отцентрировать по горизонтали, достаточно указать отступы справа и слева как auto:

.box-content

Если вложенный элемент .box-content является строчным (img, a, span и др.), то для него понадобится указать display:

.box-content

3. Использование text-align у внешнего блока

text-align также позволяет выполнить выравнивание по горизонтали, в первую очередь он используется для текста.

Например, в данном случае:

 

Какой-то текст

Выравнивания по центру можно достичь, указав text-align для .text-box :

.text-box

4. Горизонтальное выравнивание блока при помощи абсолютного позиционирования

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

.box < position: relative; >.box-content

Как выровнять блок по вертикали?

1. Выравнивание текста из 1 строки по вертикали

Если есть блок, в котором размещен текст, занимающий не больше 1 строки (например, кнопка или пункт меню) и известна высота этого блока, то можно задать line-height , равный этой высоте.

Например, для такой структуры:

Пункт меню

Выравнивание по вертикали будет выглядеть следующим образом:

.menu-item

2. Вертикальное выравнивание блока при помощи абсолютного позиционирования

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

.box < position: relative; >.box-content

Также можно указать позиции со всех сторон, равные 0, если известны ширина и высота блока, и такой вариант также будет работать:

.box < position: relative; >.box-content

3. Табличное выравнивание по вертикали

Как известно, в таблицах работает vertical-align для выравнивания их контента по высоте.

 
Какие-то данные

Если использовать display: table в стилях, то возможно добиться того же:

.table < display: table; width: 100%; >.table-row

4. Вертикальное выравнивание при помощи CSS3-трансформации

CSS3 позволяет выполнять выравнивание буз необходимости добавления внешних блоков. Достаточно иметь один блок:

Какие-то данные

Стили для него будут выглядеть следующим образом, если у него известны высота и ширина:

Если же размеры блока неизвестны, то внешний блок становится нужен:

 
Какие-то данные

И стили определяются так:

.box-content

Поделиться статьей «Как выровнять по центру блок в CSS?»

Выравнивание по центру с position: absolute

пример окошка в центре экрана

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

пример такого окошка.

Обычно, координаты для таких окошек вычисляются с помощью javascript по формуле left = /2 — /2. Но когда ширина (width) окна фиксированная, можно не делать лишних вычислений, а задать позицию такого окна в CSS:

.divInCenter <
width: 300px; /* жестко задана ширина */
position: absolute;
left: 50%;
margin-left: -150px; /* отрицательный отступ равный 1/2 ширины (width) позиционируемого блока */
>

Заметки

  • Когда же известна и высота позиционируемого блока, аналогично можно отцентрировать и по вертикали (с этим нужно быть аккуратней — не всегда окно может появится, где ожидается. Например, когда страница занимает больше одного экрана, такое позиционирование не будет учитывать на сколько прокручено окно и всегда будет показывать всплывающий блок в одном и том же месте).
  • в expression 200 — это высота родительского блока.
  • CSS приемы
    • «Дергание» сайта
    • background position со смещением
    • clearfix
    • CSS прозрачность
    • CSS хаки
    • RGBA — CSS полупрозрачность
    • Затемнение фона
    • Кроссбраузерный

    • Обнуление отступов
    • Порядок описания ссылок
    • Прелоад изображений
    • Сброс стилей
    • Сокращения в CSS
    • Убираем рамку с эл-ов в фокусе
    • Условные CSS
    • Условные комментарии
    • Поворот вокруг своей оси
    • Поворот объекта вокруг свой
    • Resize для textarea в Safari и Chrome
    • Блочная верстка форм
    • Кастомные checkbox и radio на CSS
    • Кросбраузерные input и textarea
    • Кроссбраузерный button
    • Нестандартные checkbox
    • Нестандартные radio
    • Нестандартные select
    • Нестандартные select multiple
    • Нестандартные поля выбора файла
    • Нестандартные текстовые поля
    • О кроссбраузерности placeholder
    • Отступы у checkbox и radio
    • Оформление input type=search
    • Резиновая кнопка
    • Текст в поле type=»password»
    • Блоки равной высоты в строке
    • Колонки равной высоты
    • Прижимаем подвал к низу
    • Ресайз окна: потомок перерос родителя
    • Сайт в центре экрана
    • Фиксированная колонка + резиновая + clear:both
    • CSS 3D лента
    • CSS3 всплывающие подсказки
    • IMG внутри блока — убираем странный отступ
    • IMG: меняем рисунок при наведении
    • Аккордеон на чистом CSS3
    • Валидный target=»_blank»
    • Верстка рейтингов
    • Верстка содержания
    • Вставка спецсимволов в генерируемый контент
    • Вставка стрелок
    • Индивидуальные стили для li. Избавляемся от классов.
    • Масштабируемая картинка в резиновой колонке
    • Многоколоночный текст на CSS3
    • Нестандартное подчеркивание
    • Отменяем обтекание текстом картинки
    • Оформление внешних ссылок
    • Оформление изображений по align
    • Оформляем «ol»
    • Правильные анонсы новостей
    • Список определений. Требуем невозможного.
    • Firefox
      • -moz-box-shadow и -moz-border-radius — это кошмар CPU
      • Позиционирование внутри button
      • Ширина input type=file
      • Onload в IE9
      • z-index в IE6-7
      • Баг с текстом при применении Alpha фильтра
      • Масштабирование и PIE
      • Отступы в кнопках в IE6-7
      • Проблемы с em
      • Эмуляция after и before для IE 6-7
      • Эмуляция data:URL для IE6-7 — используем MHTML-включение
      • hasLayout
      • Max-width
      • Min-height
      • Min-width
      • Min-width и max-width одновременно
      • PNG и прозрачность
      • Высота блока 1px
      • Дублирование символов
      • Дырка под футером
      • Как перекрыть select
      • Обрезка контента c отрицательным margin в IE6
      • Отступы плавающих блоков
      • Проблемы с размерами блоков
      • Псевдокласс :first-child
      • Псевдокласс hover в IE 6
      • Селектор потомков >
      • Селекторы атрибутов [type=…]
      • Сестринский селектор
      • Смещение на 1px
      • Ссылки с вложением
      • Устраняем flickering
      • Эмуляция position:fixed
      • overflow-y
      • Не подгружаются шрифты @font-face
      • Проблема с oveflow: hidden
      • Скругление img
      • HTML шаблон для мобильных устройств
      • Выпадающее меню на CSS
      • Выравнивание навигации из блоков по центру
      • Выравнивание навигации по середине
      • Резиновое меню
      • Резиновое меню из блоков
      • Убираем класс для первого элемента
      • Box-sizing: переключаем блочную модель
      • inline-block: простое свойство для непростых задач
      • Вертикальная позиция для строчного элемента
      • Вертикальное выравнивание
      • Выравнивание по центру с position: absolute
      • Вычисляемые отступы
      • Два в одном: позиция + размеры
      • Долой отступы между строчными элементами (и блоками)
      • Обходим схлопывание margin
      • Центрирование картинки в блоке
      • Центрирование резинового блока по горизонтали
      • Активация flash
      • Вставка flash в HTML
      • Вставляем ролик с YouTube
      • Как отключить flash
      • Как перекрыть flash
      • Параметры для вставки объектов
      • Ссылка на flash объекте
      • CSS треугольники
      • Аппаратное ускорение анимации
      • Встраиваем изображения — data:URL
      • Градиент: CSS3 против CSS2 + картинка
      • Лесенка спрайтов — сложный случай поклейки
      • На одну картинку меньше. Спецсимвол ×
      • Необычные тени с CSS3 box-shadow
      • Оптимизация Google Web Fonts
      • Оптимизация фонов с помощью Canvas
      • Проблемы с border-radius
      • Псевдоэлемент before для маркера списка
      • Скругление углов. Обзор методов.
      • Сокращаем HTML5 код
      • Спрайты: меньше картинок — больше скорость
      • Тень для блока
      • Фигуры с углами на CSS
      • Шаблоны градиентов
      • Дополнение Skype
      • Подключить favicon
      • Профилактика сайта: максимально простое оповещение
      • Ссылки на skype
      • @font-face в деталях
      • Cufon — нестандартный шрифт средствами JS
      • font-size: 100.01% для html
      • Безопасные шрифтовые CSS стеки для англоязычных текстов
      • Безопасные шрифтовые CSS стеки для рунета
      • Безопасные шрифты
      • Вертикальный текст
      • Используем псевдоэлемент :first-letter
      • Контур для текста
      • Нестандарный шрифт. Быть ему или нет?
      • Нестандартный шрифт средствами CSS
      • Плавающий :first-letter
      • Подмена текста изображением
      • Соответствия шрифтов Windows, Mac и Unix/Linux
      • Строчный :first-letter
      • Текст под углом
      • Текст с CSS градиентом
      • Тень для текста
      • Эффект отражения

      © Copyright. . Xiper. All Rights Reserved. Terms | Site Map

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *