Position fixed по центру

@igor3310 · Регистрация: 16.02.2011

Студворк — интернет-сервис помощи студентам

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

@arttek · 17.04.2012, 19:06

Смотря что ты имешь ввиду под элементом если это текст то так <p align="center"> ТУТ ВАШ ТЕКСТ </p>
Если это изображение <div align="center"><img scr="book.gif"></div>

@igor3310 · 17.04.2012, 19:09 **[ТС]**

надо дивы по центру и position fixed - уже голову сломал

@Bahamut · 17.04.2012, 21:28

Я так понимаю, надо чтобы по горизонтали он был центрирован, а по вертикали — зафиксирован, верно?

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

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

Это надо? Стиль или класс прописывать элементу. То есть, если это изображение, то <img style="position:fixed;" и так далее.

@User-Play · 16.08.2017, 08:15

Вот решение
fixed по центру горизонтали

CSS
1
2
3
margin:auto;
left:0;
right:0;

@Al_lord · 16.08.2017, 09:48

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

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

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
.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 вносить новые данные.

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

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 так как его ширина будет зависит от ширины его внутреннего контента.
Но для большей адаптивности и контролируемость стоит указать максимальную и основную ширину блока.

CSS
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 можно заставить мониторить ширину и высоту блока и давать соответствующую реакцию блоку.

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

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@igor3310 3 / 3 / 4 Регистрация: 16.02.2011 Сообщений: 270

	Position fixed по центру 17.04.2012, 18:17. Показов 57657. Ответов 5 Метки нет (Все метки) Здравствуйте! Подскажите пожалуйста как задать элементу свойство position fixed и чтоб оно цбыло по центру в разных разрешениях монитора? 0

@arttek 2 / 2 / 0 Регистрация: 06.12.2011 Сообщений: 30
	17.04.2012, 19:06
	Смотря что ты имешь ввиду под элементом если это текст то так <p align="center"> ТУТ ВАШ ТЕКСТ </p> Если это изображение <div align="center"><img scr="book.gif"></div> 0

@igor3310 3 / 3 / 4 Регистрация: 16.02.2011 Сообщений: 270
	17.04.2012, 19:09 [ТС]
	надо дивы по центру и position fixed - уже голову сломал 0