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

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

Новые блоги и статьи Все статьи Все блоги /
My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Вот уже год прошел, как у меня домен в reg.ru ... Etyuhibosecyu 16.04.2026 И ничего они мне не сделали. Если отвязать карту, никакие услуги они не навяжут. Я бы с радостью продлил еще на два года, чтобы не мучиться с временным доменом и меня уже знали по red-star-soft. com,. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .

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

	Position fixed по центру 17.04.2012, 18:17. Показов 57728. Ответов 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