Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Как отцентровать абсолютно спозиционированный элемент с использованием CSS

9 мая 2015 | Опубликовано в css | 3 Комментариев »

Время от времени возникает задача отцентровать абсолютно спозиционированный элемент. Предлагаемое решение кажется очевидным после его реализации. Горизонтальное расположение по центру статического элемента с помощью CSS обычно осуществляется с помощью установки автоматического значения левого и правого внешнего отступов, например:

 

 

#myelement{
  margin: 0 auto;
} 

Но этот способ не сработает, если у элемента абсолютное позиционирование. В этом случае его расположение определяется относительно непосредственного родителя, у которого абсолютное, относительное или фиксированное позиционирование.

В следующем примере у относительно спозиционированного красного прямоугольника ширина задана как 40% доступного пространства. Значение отступа от верхней границы у абсолютно спозиционированного синего квадрата составляет 10px, а значение отступа от левой границы — 30px:

#outer{
  position: relative;
  width: 40%;
  height: 120px;
  margin: 20px auto;
  border: 2px solid #c00;
}
#inner{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 10px;
  left: 30px;
  background-color: #00c;
}

 

 

Если мы не уверены в точных размерах синего блока, можно не задавать значение ширины, при этом задав одинаковые значения для отступов от правой и левой границ. Это расположит синий блок в центре:

#outer{
  position: relative;
  width: 40%;
  height: 120px;
  margin: 20px auto;
  border: 2px solid #c00;
}
#inner{
  position: absolute;
  height: 100px;
  left: 30px;
  top: 10px;
  right: 30px;
  background-color: #00c;
}

 

А как отцентровать блок с заданными размерами? Ответ может быть несколько необычным:

  1. Для начала зададим значение отступа от левой границы 50%. Это передвинет левый край синего квадрата в центр.
  2. Так как теперь квадрат сдвинут сильно вправо, зададим отрицательное значение левого внешнего отступа, равное половине ширины квадрата. В этом примере нужно задать значение -50px, чтобы квадрат вернулся на место.
#outer{
  position: relative;
  width: 40%;
  height: 120px;
  margin: 20px auto;
  border: 2px solid #c00;
}
#inner{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 10px;
  left: 50%;
  margin-left: -50px;
  background-color: #00c;
}

 

 

Синий квадрат будет располагаться по центру не зависимо от изменения ширины внешнего элемента.

Автор урока Craig Buckler

Перевод — Дежурка

Смотрите также:




Комментарии

  1. Сергей
    Thumb up Thumb down 0

    А ещё достаточно просто написать transform: translate (-50%, 0%); и вообще не париться по поводу «половины блока».

    Ответить

  2. vvzakharov
    Thumb up Thumb down +1

    Позиционирование без "position:absolute; " по вертикали и горизонтали.

    body{height:100%;margin:0px;}

    #body{

    position: relative;

    width: 100%;

    height: 100%;

    display:table;

    }

    #outer{

    display:table-cell;

    vertical-align:middle;

    border: 2px solid #c00;

    text-align:center;

    }

    #inner{

    text-align:left;

    background-color: #00c;

    display:inline-block;

    vertical-align:middle;

    }

    Абсолютное позиционирование:

    body{height:100%;margin:0px;}

    #body{

    position: relative;

    width: 100%;

    height: 100%;

    }

    #outer{

    position:absolute;

    top:50%;

    left:50%;

    -webkit-transform: translate (-50%, -50%);

    -moz-transform: translate (-50%, -50%);

    -ms-transform: translate (-50%, -50%);

    -o-transform: translate (-50%, -50%);

    transform: translate (-50%, -50%);

    }

    Ответить

  3. rezolvent
    Thumb up Thumb down +2

    Если у родительского элемента позиционирование относительное, фиксированное или абсолютное, а у дочернего известны высота и ширина, то для центрирования можно ещё указать, left,right,top,bottom равными 0 и поставить margin: auto;

    #outer{

    position: relative;

    width: 40%;

    height: 120px;

    margin: 20px auto;

    border: 2px solid #c00;

    }

    #inner{

    position: absolute;

    width: 100px;

    height: 100px;

    background-color: #00c;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    margin: auto;

    }

    codepen.io/rezolvent/pen/GJoXKY

    Ответить

Оставить ответ


− пять = 0

Вставить изображение