Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
7 апреля 2019 | Опубликовано в css | Нет комментариев »
Если вы знаете точные значения ширины и высоты элемента, его можно расположить точно в центре его родительского элемента с помощью способа, описанного нами в уроке «Использование различных методов для размещения объекта ровно по центру»: задать значение верхнего и левого углов как 50% и отрицательные внешние отступы как половину высоты и ширины элемента. Этот способ отлично подходит для известных фиксированных значений высоты и ширины элемента, но что, если значения высоты и ширины элемента, который нужно расположить по центру, заданы в процентах?
Возможно, вы считаете, что можно просто использовать отрицательные внешние отступы, заданные в процентах. Это сработает для горизонтальных внешних отступов, но внешние отступы основываются на ширине, даже вертикальные, так что это перестанет работать, если использовать отрицательный верхний внешний отступ для задания расположения.
Если бы нужно было отцентрировать строчно-блочный элемент, можно было бы использовать невидимый псевдоэлемент и свойство вертикального расположения со значением средины. Но чаще всего отцентровать нужно не строчно-блочные элементы, а окно, которое появляется поверх всего. Также для маленьких экранов и адаптивных сайтов, вероятней всего, окно диалога должно будет иметь размеры, заданные в процентах или другим относительным способом, например, с помощью только свойства максимальной ширины.
Поэтому воспользуемся другим способом: вместо использования отрицательных внешних отступов, применим свойством трансформации с функцией переноса:
.center { position: absolute; left: 50%; top: 50%; /* Вместо( margin-left: -25%; margin-top: -25%; */ /* Добавим */ transform: translate(-50%, -50%); /* Значение высоты можно даже не указывать */ width: 40%; height: 50%; }
При необходимости поддерживать старые версии браузеров, может понадобиться добавить свойства с приставкой производителя.
И в результате получаем:
Автор урока Chris Coyier
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191