Как центрировать элемент, используя position:fixed в CSS?

Шпаргалка по CSS Selector Программирование и разработка

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>

Вывод: вывод приведенного выше кода.

Читайте также:  Как расширить свойства HTML-элемента в TypeScript?

этом примере у нас есть тег ap, позиция которого установлен

Пример 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>

Вывод: вывод приведенного выше кода

 

Оцените статью
bestprogrammer.ru
Добавить комментарий