678

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

Розгорніть фрагмент

— користувач1098278
джерело

3

вам потрібно надати ul # слайд-шоу фіксовану ширину ...

— ptriek

1193

Якщо ви встановили ширину, яку ви можете використовувати:

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

— баароз
джерело

21

Це набагато чистіша відповідь, ніж решта! Чи є якісь застереження?

— sbichenko

8

Найрозумніша відповідь. Я щойно перевірив це, і він працює у всіх браузерах. Він не працює на IE8, але працює на IE> = 9

— Роджер

13

Не забудьте протестувати в IE, цей трюк не працює, якщо в елементі встановлено "максимальну ширину" в IE9

— афакс

33

Я особисто віддаю перевагу синтаксису "margin: 0 auto; зліва: 0; right: 0;"

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

58

Це просто не працює, якщо не встановлена ширина. Це може ПРИЄДНАТО працювати, якщо у вас є вирівнювання тексту: центр на батьківському і не має фону на абсолютно розташований елемент, але покладіть на нього фон, і ви побачите, що він насправді займає повну ширину. Відповідь translateX (-50%) є правильною.

— Codemonkey

585

Не знаючи 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/ leftз 50%ходів верхнього лівого краю / край елемента до середини батька, і translate()функції з (негативною) вартістю -50%переміщує елемент по половині його розміру. Отже елемент буде розташований посередині.

Це пояснюється тим, що відсоткове значення в top/ leftвластивості відносно висоти / ширини батьківського елемента (який створює блок, що містить).

У той час як значення відсоткового значення функції перетворення відносно ширини / висоти самого елемента (насправді це стосується розміру обмежувального поля ) .translate()

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

^{1. Елемент, відмінний від positionіншого static. Тобто relative, absolute, fixedзначення.}

— Хашем Qolami
джерело

65

Це має бути головна відповідь !!

— Кріс Пайн

3

Фантастичний! Найкраще з партії!

— Bhargav Ponnapalli

4

Я всюди шукав відповідь на це і гарне пояснення. Це найкраща відповідь там і чудове пояснення! Дякую.

— Майк

5

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

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

1

Щойно я знайшов це translateвластивість, переклади елемент за розміром самого себе , незалежно від розміру його батьківського.

— Farzin Kanzi

185

Відцентрування чогось absoluteрозташованого в CSS досить складно.

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

}

Змініть margin-leftна (негативну) половину ширини елемента, який ви намагаєтеся центрирувати.

— книжкова касета
джерело

5

Під час тестування це не працює, коли зображення різного розміру, і вони все ще складаються один на одного

— Ryan Gibbons

3

Занадто hack-ish (як це майже завжди виявляється за допомогою css). Але дивовижно! :-)

— Dr.Kameleon

1

Мене спокусив розумність деяких інших відповідей, але тільки ця була надійною для мене.

— Кріс Шиффхауер

У мене було таке ж питання, як у Райана, тому я спробував другу відповідь, запропоновану "baaroz", і це спрацювало на мене !!! і він підтримує різні резолюції також, оскільки мій головний DIV має ширину у%, а не PX

— UID

Це насправді не зосереджено. Це більше розміщено праворуч

— Article

82

Дінь вертикально і горизонтально вирівняний центр

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

Примітка. Елементи повинні мати встановлені ширину та висоту

— Себін Саймон
джерело

1

Я не знаю, чому за це більше не голосують. Наскільки я можу сказати, працює у всіх браузерах, включаючи мобільні браузери. Шви надійніші з точки зору опори. Це просто, легко і чисто ...

— Девід Мартінс

1

Це краща відповідь. Для цього потрібно лише один div, щоб зробити більше випадків використання, ніж дзвінок зліва: 50% ;, top: 50%; подобається рішення з 69+ голосами

— Ian 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 грудня 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;
}

— Вадамадафака
джерело

32

Це працювало для мене:

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

— Подумайте
джерело

27

до центру aa position: абсолютний атрибут, який потрібно встановити ліворуч: 50% і margin-left: -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>

— Реднас
джерело

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;

— Крис
джерело

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

Або тепер ви можете використовувати флекс-коробку з абсолютним положенням:

.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(що є зайвим btw), це робить усі вбудовані та вбудовані блоки дочірніх елементів у центрі їх найближчих блокових елементів, у вашому коді це liтеги. Усі елементи блоку мають, width: 100%якщо вони є статичним потоком ( position: static;), який є типовим. Проблема полягає в тому, що коли ви говорите про liтеги position: absolute;, ви виймаєте їх із звичайного статичного потоку, і це змушує їх зменшити розмір, щоб просто відповідати їхньому внутрішньому вмісту, іншими словами вони «втрачають» свою width: 100%властивість.

— Костянтин Калбазов
джерело

5

Використання left: calc(50% - Wpx/2);де W - ширина елемента для мене працює.

— Джулікс
джерело

Як визначити W?

— Purplejacket

Він сказав "зображення" - в ідеалі, коли ви робите зображення в Інтернеті, ви повинні зробити зображення у розмірі, який ви будете використовувати його (а не змінювати його розмір), щоб уникнути зайвої ваги (якщо ви робите велике зображення невеликий) або нечіткість (якщо зробити невелике зображення великим). - Ви можете використовувати "imageElement.naturalHeight" та "imageElement.naturalWidth", якщо ви використовуєте jQuery, а також стиль також динамічно, але це стає трохи складніше. Для справедливості багато інших відповідей також вимагають від вас знати ширину зображення, щоб їх техніка працювала.

— Джулікс

якщо вам насправді не зрозуміло, як отримати W, в Chrome ви можете використовувати CTRL + Shift + i (інструменти для розробників), а потім CTRL + Shift + C (перевірити режим), щоб навести курсор на елементи та побачити, наскільки широкі речі. Ви також можете просто вирішити, якої ширини ви хочете, щоб вона була, і додати "width: Wpx" до свого css.

— Джулікс

4

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

Переглянуту версію коду можна знайти внизу. У моїй редакції я зосереджую як список, так і зображення в ньому.

Правда полягає в тому, що ви не можете зосередити елемент, який має положення абсолютного.

Але цю поведінку можна наслідувати!

Примітка. Ці інструкції працюватимуть із будь-яким елементом блоку DOM, а не лише з img.

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

Змініть css або scss, щоб надати діву абсолютне позиціонування та зображення по центру.

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

І там у вас є! Ваш імідж має бути зосереджено!

Ваш код:

Спробуйте це:

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>

Розгорніть фрагмент

— СантошК
джерело

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 батьківському (Останній блок-елемент має абсолютне положення або відносне положення).

Я не впевнений, що саме ти, що ти намагаєшся досягти, можливо, найкраще буде встановити лі на «а» 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;

Більш детальну інформацію про перший приклад можна знайти тут:
Підтримуйте співвідношення сторін поділки за допомогою CSS

— Маріан07
джерело

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>

Поки я не прочитав цю публікацію, використовуючи автоматичну техніку margin: 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>

Розгорніть фрагмент

— антелове
джерело

1

У цій відповіді є лише код. Хоча це може бути правильним, він повинен мати супровідне пояснення, чому код відповідає на питання ОП. Код не є "поясненням" на Stack Exchnge.

— JBH

Як центрувати елемент "позиція: абсолют"

Пояснення

Пояснення

Але цю поведінку можна наслідувати!

І там у вас є! Ваш імідж має бути зосереджено!

Ваш код: