Как центрировать элемент «позиция: абсолют» - PullRequest
Новая
       77

Как центрировать элемент «позиция: абсолют»

582 голосов
/ 14 декабря 2011

У меня проблема с центрированием элемента с атрибутом position, установленным в absolute.Кто-нибудь знает, почему изображения не центрированы? 

body {
  text-align: center;
}

#slideshowWrapper {
  margin-top: 50px;
  text-align: center;
}

ul#slideshow {
  list-style: none;
  position: relative;
  margin: auto;
}

ul#slideshow li {
  position: absolute;
}

ul#slideshow li img {
  border: 1px solid #ccc;
  padding: 4px;
  height: 450px;
}
<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="img/dummy1.JPG" alt="Dummy 1" /></li>
      <li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>
    </ul>
  </div>
</body>

Ответы [ 24 ]

1033 голосов
/ 28 августа 2013 
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
497 голосов
/ 11 сентября 2014

Не зная width / height позиционированного элемента 1 , все еще можно выровнять его следующим образом:

ПРИМЕР ЗДЕСЬ 

.child {
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
}

Стоит отметить, что CSS-преобразование поддерживается в IE9 и выше . (префиксы поставщиков для краткости опущены)

Объяснение

Добавление top / left из50% перемещает верхний / левый край поля элемента к середине родительского элемента, а функция translate() со значением (отрицательное) -50% перемещает элементна половину его размера.Следовательно, элемент будет расположен посередине.

Это потому, что процентное значение в свойствах top / left относится к высоте / ширинеродительского элемента (создающего содержащий блок).

В то время как процентное значение для translate() transform относится к ширине / высоте элементасамо по себе (на самом деле это относится к размеру ограничительной рамки ) .

Для однонаправленного выравнивания используйте вместо translateX(-50%) или translateY(-50%).

1.Элемент с position отличным от static.Т.е. relative, absolute, fixed значения.

175 голосов
/ 14 декабря 2011

Центрирование чего-либо absolute позиционируется довольно сложно в CSS. 

ul#slideshow li {
    position: absolute;
    left:50%;
    margin-left:-20px;

}

Измените margin-left на (отрицательную) половину ширины элемента, который вы пытаетесь отцентрировать.

77 голосов
/ 28 января 2014

Разделить вертикально и горизонтально выровненный центр 

top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;

Примечание: элементы должны иметь ширину и высоту для установки

50 голосов
/ 29 октября 2012

Простой трюк CSS, просто добавьте: 

width: 100%;
text-align: center;

Работает как с изображениями, так и с текстом.

42 голосов
/ 24 мая 2014

Если вы хотите центрировать абсолютный элемент 

#div {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Если вы хотите, чтобы контейнер располагался по центру слева направо, но не сверху вниз 

#div {
    position:absolute;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Если вы хотите, чтобы контейнер располагался по центру сверху вниз, независимо от того, слева направо 

#div {
    position:absolute;
    top:0;
    bottom:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Дополнение от 15.12.2015

Ну, я научился этому новому трюку несколько месяцев назад. Предполагая, что у вас есть относительный родительский элемент.

Вот ваш абсолютный элемент. 

.absolute-element { 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    width:50%; /* You can specify ANY width values here */ 
}

С этим, я думаю, это лучший ответ, чем мое старое решение. Так как вам не нужно указывать ширину и высоту. Этот он адаптирует содержание самого элемента.

26 голосов
/ 06 сентября 2017

Это сработало для меня: 

position: absolute;
left: 50%;
transform: translateX(-50%);
25 голосов
/ 14 декабря 2011

для центрирования позиции: абсолютный атрибут, который необходимо установить влево: 50% и поле слева: -50% от ширины деления. 

<!-- for horizontal -->
<style>
div.center{
 width:200px;
 left:50%;
 margin-left:-100px;
 position:absolute;
}
</style>


<body>
 <div class='center'>
  should be centered horizontaly
 </div>
</body>

для абсолютного вертикального центра вам нужно сделать то же самое, но не слева, а сверху. (ПРИМЕЧАНИЕ: html и body должны иметь минимальную высоту 100%;) 

<!-- for vertical -->
<style>
 body,html{
  min-height:100%;
 }
 div.center{
  height:200px;
  top:50%;
  margin-top:-100px;
  position:absolute;
 }
</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

и могут быть объединены для обоих 

   <!-- for both -->
 <style>
 body,html{
  min-height:100%;
 }
 div.center{
  width:200px;
  height:50px
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-25px;
  position:absolute;
 }
</style>


<body>
 <div class='center'>
  should be centered
 </div>
</body>
20 голосов
/ 09 апреля 2018

Центрирование элемента «позиция: абсолют». 

.your-element {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center; // or this ->  margin: 0 auto;
}
16 голосов
/ 24 мая 2014 
    <div class="centered_content"> content </div>
    <style type="text/css">
    .centered_content {
       text-align: center;
       position: absolute;
       left: 0;
       right: 0;
    }
    </style>

см. Демонстрацию по: http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align: center;работает с элементом position: absolute при добавлении left: 0; right: 0;

Страница:
...