HTML (язык гипертекстовой разметки) — это язык, используемый веб-разработчиками для создания структуры веб-сайта, а также CSS для проектирования и внешнего вида веб-сайта и Javascript для придания логики и бэкенда веб-сайту.
В этой статье мы рассмотрим, как мы можем центрировать элемент с атрибутом position в CSS, установленным на » fixed «.
Подход: Чтобы центрировать элемент, мы устанавливаем свойство top и свойство left на 50% и 50%. Это переместит верхний левый угол элемента в центр. Теперь из-за этого элемент не будет точно в центре, а в верхнем левом углу. Следовательно, используя свойство translate, мы сдвинем элемент на 50% влево и на 50% вверх (в зависимости от его размера).
- Установите верхнюю часть на «50%», а левую на «50%».
- Теперь установите для свойства преобразования значение «перевести (-50%, −50%)».
Синтаксис:
element{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, 50%); }
Пример 1. В этом примере у нас есть элемент div с фиксированной позицией, и мы центрировали его на экране, используя приведенный выше код.
index.html: HTML-код выглядит следующим образом:
HTML
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>
How to center a position:fixed element ?
</
title
>
<
style
>
body {
font-family: sans-serif;
padding: 0;
margin: 0;
background-color: black;
color: white;
}
div {
border: 2px solid white;
width: 50%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1 {
color: springgreen;
}
</
style
>
</
head
>
<
body
>
<
div
>
<
h1
>GeeksforGeeks</
h1
>
<
h3
>How to center a position:fixed element?</
h3
>
</
div
>
</
body
>
</
html
>
Вывод: вывод приведенного выше кода.
Пример 2: В этом примере у нас есть тег ap, позиция которого установлена на фиксированную, а затем он центрируется с использованием вышеуказанного метода.
index.html: HTML-код выглядит следующим образом:
HTML
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>
How to center a position:fixed element?
</
title
>
<
style
>
body {
font-family: sans-serif;
padding: 0;
margin: 0;
}
p {
background-color: rgba(0, 255, 127, .3);
width: 25%;
padding: 5px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1 {
color: springgreen;
}
</
style
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks</
h1
>
<
h3
>How to center a position:fixed element?</
h3
>
<
p
class
=
"child"
>I am child p tag</
p
>
</
body
>
</
html
>
Вывод: вывод приведенного выше кода