Как расположить элемент по центру css absolute

Как выровнять DIV с position: absolute по центру TD?

Всем доброго времени. Необходимо отцентровать DIV с выставленным position: absolute в центре TD.
Для TD делаю text-align: center; position: relative;
Для DIV делаю position: absolute; margin-top: -0.625em; (1 строчка текста).
Вертикально DIV центрируется, а вот по горизонтали не получается.

• Вопрос задан более трёх лет назад
• 43715 просмотров

Комментировать
Решения вопроса 1

Вы не особо понимаете для чего нужен absolute и как его использовать.
Что б выровнять абсолютный элемент по центру родителя:
top:50%;
left:50%;
transform:translate(-50%, -50%);

Ответ написан более трёх лет назад
Нравится 20 3 комментария
A.Politik @apthur Автор вопроса
Спасибо! Помогло! Во истину transform:translate(-50%, -50%);

Ярослав Иванов @space2pacman Куратор тега CSS

top:50%; left:50%; transform:translate(-50%, -50%);

left:0; right:0; top:0; bottom:0; margin: auto;

скажите какой метод подойдет если 3 блока и стоят уже в линию по горизонту как их центрировать?
.block div <
line-height: 80px;
font-size: 18px;
font-weight: 900;
text-align: center;
color: #fff;
width: 200px;
display: inline-block;
position: relative;
left:50%; (. )
>

Ответы на вопрос 0
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• HTML
• +1 ещё

Как пофиксти проблему с амперсантом?

• 1 подписчик
• 12 часов назад
• 58 просмотров

Как расположить абсолютный элемент по центру родительского?

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

ul < list-style: none; >.nav < background-color: #000; min-height: 50px; text-align: center; >.nav>li < position: relative; display: block; float: left; >.nav>li>a < position: relative; display: block; padding: 10px 15px; color: white; font-family: Arial; font-size: 16px; font-weight: 400; line-height: 1.9; text-decoration: none; >ul.dropdown-menu < background-color: white; overflow: hidden; opacity: 0; >ul.dropdown-menu a < display: inline-block; color: #000; text-decoration: none; padding: 10px; >ul.nav li.dropdown:hover > ul.dropdown-menu < display: block; overflow: visible; opacity: 1; >.navbar-nav>li:hover < background-color: #ffd900; >.navbar-nav>li.dropdown:hover < position: relative; >.navbar-nav>li.dropdown:hover:after

Отслеживать

задан 18 окт 2016 в 12:29

4,488 6 6 золотых знаков 38 38 серебряных знаков 93 93 бронзовых знака

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

ul.dropdown-menu

Нужно лишь добавить margin: 0 и все будет по центру

.navbar-nav>li.dropdown:hover:after

И тут добавить left: 0; right: 0, margin:0 auto;

Position fixed по центру

Здравствуйте!
Подскажите пожалуйста как задать элементу свойство position fixed и чтоб оно цбыло по центру в разных разрешениях монитора?

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Fixed absolute и relative. Как сделать fixed блок по центру relative родителя?
Хелп плз( сломал голову уже и поиск ни к чему толковому не привел. <div <div.

position:fixed
хром меню показывает не там где нужно http://stihi-na-zakaz.16mb.com/site/ как сделать что бы оно.

Position: fixed;
почему элемент с position: fixed; немного, примерно на половину своей высоты, "ездит" вверх-вниз.

Регистрация: 06.12.2011
Сообщений: 30

Смотря что ты имешь ввиду под элементом если это текст то так

ТУТ ВАШ ТЕКСТ

Если это изображение
Регистрация: 16.02.2011
Сообщений: 270
надо дивы по центру и position fixed — уже голову сломал
Регистрация: 14.04.2012
Сообщений: 94
Я так понимаю, надо чтобы по горизонтали он был центрирован, а по вертикали — зафиксирован, верно?

div align="center" width=100%>span style="position:fixed;">Текст, например./span>/div>

Итого: массив растянутый на 100% ширины окна с центрированием содержит внутри себя текст (как пример), который сохраняет постоянное вертикальное положение вне зависимости от прокрутки страницы и центрирован.

Это надо? Стиль или класс прописывать элементу. То есть, если это изображение, то
Регистрация: 18.11.2014
Сообщений: 7
Вот решение
fixed по центру горизонтали

1 2 3

margin:auto; left:0; right:0;

39 / 39 / 26
Регистрация: 11.01.2014
Сообщений: 343

1) Современные требования к верстке это адаптивность, по средине это не только по ширине монитора, но и по отношению к высоте монитора.
2) Высота блока по центру может (и будет) меняться! так что обычный fixed или text-align-center вам не поможет
3) Гуглите, в интернете есть куча способов выставить блоки по центру.
Как правило для решения любой задачи в верстке есть как минимум 3 рещения
-самый глупый «в лоб»
Это когда мы все ставим как видим. Со статическими данными
-универсальный
Самый правильный, когда за годы работы мы сталкиваемся этой проблемой очень часто и находим самое лучшее решение.
-js
Этот инструмент развяжет вам руки там, где html кажется бессильным. Научитесь использовать этот инструмент.

Ктото выставляет в связке с position absolute и margin, но такой способ оооочень не универсален, так приходится следить за высотой блока
в лоб

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

.parent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; } .block { width: 250px; height: 250px; position: absolute; top: 50%; left: 50%; margin: -125px 0 0 -125px; img { max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; } }

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

Универсальный

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

.parent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; &:before { height: 100%; display: inline-block; vertical-align: middle; content: ''; } } .block { display: inline-block; white-space: normal; vertical-align: middle; text-align: left; img { display: block; border: none; } }

Самый лучший способ выравнивания блока по центру по отношению к другим блокам.
Идея такова что псевдоэллемент before, если он видит высоту родителя, дает нам возможность выравнять блок по центру по высоте. Так как выравниваемый блок является inline-block как и его соседний элемент, то свойство родителя text-align: center; ставит наш блок в центр по ширине.
Нам не обязательно контролировать ширину .block так как его ширина будет зависит от ширины его внутреннего контента.
Но для большей адаптивности и контролируемость стоит указать максимальную и основную ширину блока.

1 2 3 4 5 6 7 8

.block { display: inline-block; white-space: normal; vertical-align: middle; text-align: left; width:500px; max-width:100%; }

ну и js
способ. Он во многом похож на 1й способ, только js можно заставить мониторить ширину и высоту блока и давать соответствующую реакцию блоку.

А вообще странно что вы спрашиваете о такой тривиальной задачи
Учитесь пользоваться поиском. Иначе вам будет ОЧЕНЬ сложно

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Проблема с position:fixed
Проблема надо что бы фиксированный болк был с боку от всего основного текста(типо side bar’a) и при.

В IE не работает position:fixed
Здравствуйте! Подскажите пожалуйста- сделал кнопку "позвонить" справа посередине экрана и в CSS.

Абсолютное позиционирование

При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера. Установить этот тип можно через значение absolute свойства position . Координаты указываются относительно краёв окна браузера, называемого «видимой областью» или «областью просмотра» (рис. 1).

Рис. 1. Значения свойств left, right, top и bottom при абсолютном позиционировании

Для элемента с абсолютным позиционированием характерны следующие особенности.

• Ширина элемента, если она не задана явно, определяется шириной содержимого плюс значения padding , border и margin .
• Элемент не меняет своё исходное положение, если у него нет свойств right , left , top и bottom .
• Одновременно указанные свойства left и right формируют ширину элемента, но только если width не указано. Стоит добавить свойство width и значение right будет проигнорировано. Аналогично произойдёт и с высотой элемента, но уже участвуют свойства top , bottom и height .
• Свойства left и top имеют более высокий приоритет по сравнению с right и bottom . Если left и right противоречат друг другу, то значение right игнорируется. То же самое касается и bottom .
• Если left задать отрицательное значение, то элемент уйдёт за левый край браузера, полосы прокрутки при этом не возникнет. То же относится и к свойству top , только элемент уйдёт за верхний край.
• Если left задать значение больше ширины видимой области или указать right с отрицательным значением, то появится горизонтальная полоса прокрутки. Подобное правило работает и с top , только речь пойдёт о вертикальной полосе прокрутки.
• Элемент перемещается вместе с документом при его прокрутке.
• Работает свойство z-index, при этом абсолютно позиционированные элементы перекрывают статичные элементы, даже если они в коде ниже.

Свойство position со значением absolute можно использовать для создания эффекта фреймов. Кроме абсолютного позиционирования для элементов следует назначить свойство overflow со значением auto . Тогда, если содержимое превысит высоту видимой области, появится полоса прокрутки. Высота и ширина «фреймов» формируется автоматически путём одновременного использования свойств left , right для ширины и top , bottom для высоты (пример 1).

Пример 1. Имитация фреймов

Плов народов мира

Плов по-фергански

Плов узбекский

Плов сибирский

Плов итальянский

Плов эстонский

Плов по-американски

Плов по-индейски

Плов по-фергански

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

Засыпать ровным слоем рис, усилить огонь и тотчас налить воду, чтобы она накрыла рис на 1–1,5 см. Как только вода выпарится, плов при помощи шумовки собрать к середине горкой, проколоть палочкой в нескольких местах так, чтобы вода, находящаяся на поверхности, прошла на дно. Затем накрыть плов и дать ему упреть 20–25 мин.

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

Результат данного примера показан на рис. 2. Элемент выводится в потоке как обычно, а для sidebar и content установлено абсолютное позиционирование.

Рис. 2. Имитация фреймов на веб-странице

Тот же самый приём, когда мы задаём размеры элемента с помощью свойств left , right , top и bottom , применяется для создания разных эффектов. К примеру, можно сделать затемнение веб-страницы для вывода сообщения и привлечения к нему внимания. В примере 2 добавляется элемент с классом overlay , размеры которого занимают всю область просмотра. Делаем его полупрозрачного чёрного цвета, а поверх отображаем блок с классом dialog , который выводится по центру горизонтали.

Пример 2. Затемнение веб-страницы

Результат данного примера показан на рис. 3.

Рис. 3. Диалоговое окно с затемнением

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

.dialog

Таким образом, сочетание width , left , right и margin управляет выравниванием элементов.

Абсолютное позиционирование позволяет также скрывать элементы. Для этого часто добавляется стиль left: -9999px , который переносит элемент далеко влево за область просмотра. В частности, этот приём используется для стилизации переключателей и флажков, когда мы скрываем настоящий флажок, а вместо него стилизуем элемент , связанный с и выполняющим его функции (пример 3).

Пример 3. Стилизация флажка