680

У меня возникли проблемы центровки элемент , который имеет атрибут 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>

Развернуть фрагмент

— user1098278
источник

3

вам нужно задать ul # слайдшоу фиксированную ширину ...

— ptriek

1195

Если вы установили ширину, вы можете использовать:

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;

— baaroz
источник

21

Это гораздо более чистый ответ, чем остальные! Есть ли какие-то предостережения?

— сбиченко

8

Самый умный ответ. Я только что проверил, и он работает во всех браузерах. Он не работает на IE8, но работает на IE> = 9

— Roger

13

Обязательно протестируйте в IE, этот трюк не работает, если элемент имеет максимальную ширину, установленную в IE9

— aphax

33

Я лично предпочитаю синтаксис "margin: 0 auto; left: 0; right: 0;"

— Гектор Ордонес

58

Это просто не работает, если ширина не установлена. Может показаться, что это сработает, если у вас есть text-align: center на родительском элементе, и у вас нет фона для элемента с абсолютным позиционированием, но поместите фон на него, и вы увидите, что он на самом деле занимает всю ширину. Ответ TranslateX (-50%) является правильным.

— Codemonkey

587

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

ПРИМЕР ЗДЕСЬ

.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 Transform поддерживается в IE9 и выше . (Префиксы поставщиков опущены для краткости)

объяснение

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

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

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

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

^{1. Элемент с positionдругим, чем static. Т.е. relative, absolute, fixedзначение.}

— Хашем Колами
источник

65

Это должен быть главный ответ!

— Крис Пайн

3

Фантастический! Лучший из лота!

— Бхаргав Поннапалли

4

Я искал везде ответ на это и хорошее объяснение. Это лучший ответ и отличное объяснение! Спасибо.

— Майк

5

Горизонтальное центрирование: position: absolute; left: 50%; transform: translateX(-50%);вертикальный центрирующий: position: absolute; top: 50%; transform: translateY(-50%);.

— Константин Ван

1

Только сейчас я нашел это translateсвойство, переведите элемент по размеру самого себя , независимо от размера его родителя.

— Фарзин Канзи

185

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

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

}

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

— bookcasey
источник

5

При тестировании это не работает, когда изображения имеют разные размеры, и они все еще накладываются друг на друга

— Райан Гиббонс

3

Слишком хакерский (как это почти всегда получается с css). Но круто! :-)

— Dr.Kameleon

1

Меня соблазнили хитрость некоторых других ответов, но только этот был для меня надежным.

— Крис Шиффхауэр

У меня была та же проблема, что и у Райана, поэтому я попробовал второй ответ, предложенный "baaroz", и он сработал для меня !!! и он также поддерживает различные разрешения, так как мой основной DIV имеет ширину в%, а не PX

— UID

Это на самом деле не по центру. Это больше позиционируется справа

— Artsicle

82

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

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

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

— Себин Симон
источник

1

Я не знаю, почему за это не голосуют. Насколько я могу судить, работает во всех браузерах, включая мобильные. Швы более надежны в плане поддержки. Это просто, легко и чисто ...

— Дэвид Мартинс

1

Это лучший ответ. Для создания требуется только один div, и он имеет больше вариантов использования, чем вызов left: 50%; top: 50%; нравится решение с 69+ голосами

— Ян S

лучший ответ на данный момент, любой, кто придет сюда, должен это проверить!

— Абдо Адель

3

Элемент также нуждается в heightнаборе, чтобы это работало.

— alexbooots

55

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

width: 100%;
text-align: center;

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

— cutez7boyz
источник

48

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

#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 */ 
}

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

— Уэсли Брайан Лахеналь
источник

36

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

.your-element {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center; // or this ->  margin: 0 auto;
}

— Vadamadafaka
источник

32

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

position: absolute;
left: 50%;
transform: translateX(-50%);

— Deplake
источник

27

по центру позиции: абсолютный атрибут, который нужно установить влево: 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>

— Rednas
источник

16

    <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;

— Мухаммед Дайех
источник

2

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

— Rayryeng

14

Чем проще, тем лучше:

img {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto auto;
            position: absolute;
}

Затем вам нужно вставить ваш тег img в тег, который имеет спортивное положение: относительное свойство, следующим образом:

<div style="width:256px; height: 256px; position:relative;">
      <img src="photo.jpg"/>
</div>

— Стефан де Лука
источник

8

наверное самый короткий

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

— Cris
источник

1

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

— Santosh

7

Если вы не знаете ширину элемента, вы можете использовать этот код:

<body>
<div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
        I am some centered shrink-to-fit content! <br />
        tum te tum
    </div>
</div>

Демо на скрипке: http://jsfiddle.net/wrh7a21r/

Источник: https://stackoverflow.com/a/1777282/1136132

— joseantgv
источник

@ NabiK.AZ этот пример полезен, если вы не знаете ширину элемента. В вашем примере вы устанавливаете ширину div.

— Joseantgv

7

Или вы можете использовать flex box с абсолютным положением:

.parent {
    position: relative;
    display: flex;
    justify-content: center;
}

.child {
    position: absolute;
}

— Себастьян Томас
источник

это так недооценено.

— Siege21x

5

Я не уверен, что вы хотите достичь, но в этом случае просто добавив width: 100%; к своей ul#slideshow liволе свое дело.

объяснение

Эти imgтеги рядный блочные элементы. Это означает, что они текут как текст, но также имеют ширину и высоту, как блочные элементы. В вашем CSS есть два text-align: center;правила, примененных к <body>и #slideshowWrapper(что является избыточным, кстати), это делает все дочерние элементы встроенного и встроенного блоков центрированными в их ближайших элементах блока, в вашем коде это liтеги. Все блочные элементы имеют, width: 100%если они являются статическими flow ( position: static;), что по умолчанию. Проблема в том, что когда вы указываете liтегам быть position: absolute;, вы выводите их из нормального статического потока, и это заставляет их уменьшать свой размер, чтобы они просто соответствовали их внутреннему содержимому, другими словами, они как бы «теряют» свое width: 100%свойство.

— Константин Калбазов
источник

5

Использование left: calc(50% - Wpx/2);где W ширина элемента работает для меня.

— Julix
источник

Как вы определяете W?

— Purplejacket

Он сказал «изображение» - в идеале, когда вы делаете изображения для Интернета, вы должны сделать изображение того размера, который вы собираетесь использовать (а не изменить его размер), чтобы избежать ненужного веса (если вы делаете большое изображение) маленький) или нечеткость (если вы делаете маленькое изображение большим). - Вы можете использовать «imageElement.naturalHeight» и «imageElement.naturalWidth», если вы используете jQuery, а затем также динамически стилизуете, но это становится немного сложнее. Чтобы быть справедливым, многие другие ответы также требуют, чтобы вы знали ширину изображения, чтобы их техника работала.

— Julix

если вы на самом деле не знаете, как получить W, в Chrome вы можете использовать CTRL + Shift + i (инструменты разработчика), а затем CTRL + Shift + C (режим проверки), чтобы навести курсор на элементы и посмотреть, насколько они широки. Вы также можете просто решить, какой ширины вы хотите, и добавить «width: Wpx» в ваш CSS.

— Julix

4

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

Пересмотренную версию вашего кода можно найти внизу. В моей ревизии я центрирую список и изображения в нем.

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

Но этому поведению можно подражать!

Примечание. Эти инструкции будут работать с любым элементом блока DOM, а не только с img.

Окружите ваше изображение div или другим тегом (в вашем случае это li).
```
<div class="absolute-div">
  <img alt="my-image" src="#">
</div>
```
Примечание: имена, данные этим элементам, не являются специальными.

Измените ваши css или scss, чтобы обеспечить абсолютное позиционирование div и центрирование вашего изображения.

.absolute-div {
  position: absolute;

  width: 100%; 
  // Range to be centered over. 

  // If this element's parent is the body then 100% = the window's width

  // Note: You can apply additional top/bottom and left/right attributes
  // i.e. - top: 200px; left: 200px;

  // Test for desired positioning.
}

.absolute-div img {
  width: 500px;
  // Note: Setting a width is crucial for margin: auto to work.

  margin: 0 auto;
}

И вот оно! Ваш img должен быть в центре!

Ваш код:

Попробуйте это:

body
{
  text-align : center;
}

#slideshow
{
  list-style : none;
  width      : 800px;
  // alter to taste

  margin     : 50px auto 0;
}

#slideshow li
{
  position : absolute;
}

#slideshow img
{
  border  : 1px solid #CCC;
  padding : 4px;
  height  : 500px;
  width   : auto;
  // This sets the width relative to your set height.

  // Setting a width is required for the margin auto attribute below. 

  margin  : 0 auto;
}

<ul id="slideshow">
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 1" /></li>
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 2" /></li>
</ul>

Развернуть фрагмент

Я надеюсь, что это было полезно. Удачи!

— D3RPZ1LLA
источник

3

Абсолютный объект внутри относительного объекта относительно его родителя, проблема в том, что вам нужна статическая ширина для контейнера #slideshowWrapper, а остальная часть решения такая же, как говорят другие пользователи

body {
    text-align: center;
}

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

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

ul#slideshow li {
    position: relative;
    left: 50%;
}

ul#slideshow li img {
    border: 1px solid #ccc;
    padding: 4px;
    height: 450px;
}

http://jsfiddle.net/ejRTU/10/

— eveevans
источник

Ваша скрипка, как два изображения складывают друг в друга.

— Райан Гиббонс

3

Вот простое и лучшее решение для центрального элемента с «позицией: абсолют»

 body,html{
  min-height:100%;
 }
 
 div.center{
 width:200px;
 left:50%;
 margin-left:-100px;/*this is 50% value for width of the element*/
 position:absolute;
 background:#ddd;
 border:1px solid #999;
 height:100px;
 text-align:center
 }

<style>

</style>

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

Развернуть фрагмент

— SantoshK
источник

2

Вы можете попробовать так:

* { margin: 0px; padding: 0px; }
#body { height: 100vh; width: 100vw; position: relative; 
        text-align: center; 
        background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg'); 
         background-size: cover; background-repeat: no-repeat; }
.text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px; 
        display: inline-block; margin: auto; z-index: 999999; }

<html>
<body>
	<div id="body" class="container-fluid">
	  <!--Background-->
	    <!--Text-->
		  <div class="text">
		    <p>Random</p>
		  </div>	  
	</div>
</body>
</html>

Развернуть фрагмент

— Чираг Дэйв
источник

1

Абсолютная позиция удаляет его из потока и помещает в родительский элемент 0x0 (последний элемент блока имеет абсолютную позицию или относительную позицию).

Я не уверен, что именно вы то, что вы пытаетесь достичь, может быть, лучше установить li для a, position:relativeи это будет центрировать их. Учитывая ваш текущий CSS

Проверьте http://jsfiddle.net/rtgibbons/ejRTU/, чтобы поиграть с ним

— Райан Гиббонс
источник

: / в конце концов это почти то же решение, что и у вас ... <Голосовать вверх

— eveevans

1

#parent
{
    position : relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25% /* images with aspect ratio: 16:9  */
}

img 
{
    height: auto!important;
    width: auto!important;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    display: block;
    /*  */
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

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

Когда я использую комбинацию сверху, изображение ведет себя как фоновое изображение со следующими настройками:

background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;

Более подробную информацию о первом примере можно найти здесь:
сохранить соотношение сторон div с помощью CSS

— Marian07
источник

0

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

<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
    <p style="line-height:4;">width: 300 px; margin: 0 auto</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
    <p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

Пока я не прочитал эту публикацию, используя автоматическую маржу: 0, чтобы создать меню слева от моего контента, мне приходилось строить столбец одинаковой ширины справа, чтобы сбалансировать его. Не красиво Спасибо!

— Дин Неттлз
источник

0

Используйте margin-left: x%;где x - половина ширины элемента.

— Bibaswann Bandyopadhyay
источник

-1

html, body, ul, li, img {
  box-sizing: border-box;
  margin: 0px;  
  padding: 0px;  
}

#slideshowWrapper {
  width: 25rem;
  height: auto;
  position: relative;
  
  margin-top: 50px;
  border: 3px solid black;
}

ul {
  list-style: none;
  border: 3px solid blue;  
}

li {
  /* center horizontal */
  position: relative;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
  /* center horizontal */
  
  border: 3px solid red; 
}

img {
  border: 1px solid #ccc;
  padding: 4px;
  //width: 200px;
  height: 100px;
}

<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="http://via.placeholder.com/350x150" alt="Dummy 1" /></li>
      <li><img src="http://via.placeholder.com/140x100" alt="Dummy 2" /></li>
      <li><img src="http://via.placeholder.com/200x100" alt="Dummy 3" /></li>      
    </ul>
  </div>
</body>

Развернуть фрагмент

— antelove
источник

1

Этот ответ имеет только код. Хотя это может быть правильно, оно должно иметь сопроводительное объяснение того, почему код отвечает на вопрос ОП. Код не является "самоочевидным" на Stack Exchnge.

— JBH

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

объяснение

объяснение

Но этому поведению можно подражать!

И вот оно! Ваш img должен быть в центре!

Ваш код: