Як центрувати абсолютно розміщений елемент у діві?

1078

Мені потрібно розмістити div(з position:absolute;) елемент в центрі мого вікна. Але у мене виникають проблеми з цим, бо ширина невідома .

Я спробував це. Але його потрібно відрегулювати, оскільки ширина чутлива.

.center {
  left: 50%;
  bottom:5px;
}

Будь-які ідеї?

— Іш
джерело

4

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

— Mihai8

2

Є краща відповідь на це запитання на сайті stackoverflow.com/questions/17976995/…

— Andrew Swift

1333

<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>
</body>

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

— бобінець
джерело

76

Дивовижно. Працювали для мене! У мене була одна проблема: зображення, яке я центрирував, було досить великим, через що зовнішній div вийшов за межі правого краю сторінки та спричинив горизонтальне прокручування. Я поміняв властивість "left" css на "right", і поки це працює краще, оскільки перехід лівого краю екрану не спричиняє прокрутки

— BoomShaka

Що робити, якщо користувач прокрутив сторінку вниз, вверху з’явиться overylay, чи вважаєте ви, що буде хорошою ідеєю використовувати jquery для усунення проблеми прокрутки

— PUG

1

одне рішення для проблеми прокрутки може бути, position: fixedале що робити, якщо висота накладення невідома, потрібно буде впровадити смуги прокрутки для накладання

— PUG

3

Є незначна проблема, з якою я зіткнувся з використанням цієї методики. Оскільки зовнішній div займає 50% екрана, деяке зміщення відбувається, коли текст ширший за 50% екрана. Я вирішив це, встановивши зовнішній div на "width: 100%" та видаливши ліву властивість. Для внутрішнього поділу я просто встановив вирівнювання тексту в центр. Це вирішує питання.

— Нікі Л.

3

Відсоток висоти відносно блоку, що містить, в цьому випадку <html>. Але <html>елемент не має heightвказаного, тому він займає висоту всього вмісту в документі, що є нічого, тому що єдиний контент абсолютно розміщений (виведений із потоку вмісту). Додавання height: 100%до <html>елемента змінює це.

— bobince

1801

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

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* Need a specific value to work */
}

<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

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

— Маттіас Вайлер
джерело

36

Я просто хочу перейти, що негативні маржі є абсолютно дійсними CSS і не слід розглядати їх як "брудний злом". Негативні маржі згадуються у специфікації моделі коробки W3C. Деякі люди, здається, довільно вирішують, що це хакер, оскільки вони а) невідомі до них, або б) використовують їх, щоб виправити свою погану CSS.

— Джозеф Равенволф

58

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

— Стефан

2

@Joshua Це буде орієнтуватися лише горизонтально, не вертикально, як інша відповідь.

— ygoe

3

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

— iceydee

13

Для підтримки крос-браузера: widthслід встановити певне значення, щоб це працювало. autoі 100%не буде центрувати елемент. display: block;є обов'язковим. position: absolute;НЕ обов'язково. Всі значення спрацюють. Батьківський елемент positionповинен бути встановлений на щось інше, ніж static. Налаштування leftі rightдо 0не потрібні. margin-left: auto; margin-right: auto;зробить роботу.

— Onur Yıldırım

767

Чуйне рішення

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

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

Показати фрагмент коду

.outer {
    position: relative; /* or absolute */
    
    /* unnecessary styling properties */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
}

<div class="outer">
    <div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>

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

Ось JS Fiddle

Підказка полягає у тому, що left: 50%стосується батьківського, тоді як translateперетворення відносно ширини / висоти елементів.

Таким чином ви маєте ідеально центрований елемент, з гнучким шириною як для дитини, так і для батьків. Бонус: це працює, навіть якщо дитина більша від батька.

Ви також можете централізувати його вертикально за допомогою цього (і знову ж таки, ширина і висота батька і дитини можуть бути абсолютно гнучкими (та / або невідомими)):

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

Майте на увазі, що вам може знадобитися також transformпрефікс постачальника. Наприклад-webkit-transform: translate(-50%,-50%);

— ПроблемиOfSumit
джерело

26

Якщо підтримка IE7 більше не потрібна, це повинно бути фактичним рішенням. Це рішення краще, ніж ліве: 0 / право: 0 техніка, оскільки це робить елементи повної ширини, в той час як це зберігає ширину і працює на елементи невідомої ширини.

— aleemb

51

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

— Справа

2

@ChadJohnson, звичайно, так і є. Спробуйте його з webkit-префіксом, як я запропонував.

— ПроблемиOfSumit

2

Ах, я пропустив вашу замітку про -webkit. Дивовижно.

— Чад Джонсон

3

transform: translateздається, що робить position: fixedнепридатним для дітей. Прийнята відповідь в цьому випадку працює краще.

— dmvianna

49

Дійсно приємний пост .. Просто хотів додати, якщо хтось хоче це зробити з одним тегом діви, то тут вихід:

Приймаючи widthяк 900px.

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

У цьому випадку слід знати widthзаздалегідь.

— пратікабу
джерело

26

"because the width is unknown"... це не відповідає на питання

— Мішель Ейрес

15

привіт @Michel насправді, коли ви шукаєте в Google щось, що стосується центрування абсолютного диві, це посилання є першим посиланням. Ось чому я додав це рішення, якщо хтось, як я, шукає вищезазначене рішення .. :)

— pratikabu

1

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

— Шон Кендл

35

Абсолютний центр

HTML:

<div class="parent">
  <div class="child">
    <!-- content -->
  </div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}

Демонстрація: http://jsbin.com/rexuk/2/

Тестується в Google Chrome, Firefox та IE8

Сподіваюся, це допомагає :)

— Іхас Амеенудін
джерело

Це не працює, перевірте наступний codepen codepen.io/anon/pen/YqWxjJ

— Марк

1

Вибачте, я думаю, що це спрацює, але вам потрібно включити фіксовану висоту та ширину codepen.io/anon/pen/WwxEYQ

— Марк

31

ця робота для вертикалі та горизонталі

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

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

 #parentElement{
      position:relative
  }

редагувати:

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

— Мохсен Абдоллахі
джерело

2

Я думаю, що вам потрібно додати висоту для вертикальної роботи.

— Рауль

Схоже, це положення в центрі сторінки, а не центр іншого елемента.

— Günter Zöchbauer

1

@ GünterZöchbauer так, якщо ви хочете зробити елемент елемента батьківського, встановіть позицію батьківського родича.

— Мохсен Абдоллахі

20

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

#content{
  position:absolute;
  left:0;
  right:0;
  text-align: center;
}

Працював з хромом та Firefox.

— cavila
джерело

5

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

— Тобіас

Це вирішило тут мою проблему . Дякую!

— Воломіке

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

— Нат

19

Якщо вам потрібно також централізувати горизонтально та вертикально:

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

— michal.jakubeczy
джерело

дуже

— класне

15

** РЕЗОНСИВНЕ РІШЕННЯ **

Якщо припустити елемент у діві, це ще один дів ...

це рішення прекрасно працює

<div class="container">
  <div class="center"></div>
</div>

контейнер може бути будь-якого розміру (повинно бути положення щодо)

.container {
position: relative;/*important*/
width: 200px;/*any width*/
height: 200px;/*any height*/
background: red;
}

Елемент ( div ) також може бути будь-якого розміру (повинен бути меншим, ніж контейнер )

.center {
position: absolute;/*important*/
top: 50%;/*position Y halfway in*/
left: 50%;/*position X halfway in*/
transform: translate(-50%,-50%);/*move it halfway back(x,y)*/
width: 100px;/*any width*/
height: 100px;/*any height*/
background: blue;
}

Результат буде виглядати приблизно так. Запустіть фрагмент коду

.container {
	position: relative;
	width: 200px;
	height: 200px;
	background: red;
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100px;
	height: 100px;
	background: blue;
}

<div class="container">
	<div class="center"></div>
</div>

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

Я вважав це дуже корисним

— RealMJDev
джерело

1

геній. чому інший цього не придумав.

— mesqueeb

Дякую, щасливе кодування

— RealMJDev

13

Це поєднання інших відповідей, які працювали на нас:

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}

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

Гарне виправлення дякую людині!

— Стенлі Бетесвар

12

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

.container {
    position: relative;
}

.container .cat-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 100;
    text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */
    background-color: white;
}

.color-block {
  height: 250px;
  width: 100%;
  background-color: green;
}

<div class="container">
  <a class="cat-link" href="">Category</a>
  <div class="color-block"></div>
</div>

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

Це означає, що дайте мені a top: 50%і a left: 50%, а потім перетворіть (створіть простір) на осі X / Y у -50%значення, у певному сенсі "створіть дзеркальний простір".

Таким чином, це створює рівний простір для всіх 4 точок діва, який завжди є коробкою (має 4 сторони).

Це буде:

Працюйте, не знаючи висоти / ширини батьків.
Робота над чуйною.
Робота на осі X або Y. Або обидва, як у моєму прикладі.
Я не можу придумати ситуацію, коли це не працює.

— Даніель Мосс
джерело

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

— Даніель Мосс

Перетворення / переклад призведе до того, що сафарі вимкне текст у певному масштабі

— Джеймс Тан

@DanielMoss якась причина не використовувати translate(-50%,-50%);?

— Марк Байєнс

12

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

Демо

<div class="container">
  <div class="box">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </div>
</div>

.container {
  position: relative;
  width: 100%;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

— lowtechsun
джерело

9

Flex можна використовувати для центрування абсолютного розміщеного поділу.

display:flex;
align-items:center;
justify-content:center;

Показати фрагмент коду

.relative {
  width: 275px;
  height: 200px;
  background: royalblue;
  color: white;
  margin: auto;
  position: relative;
}

.absolute-block {
  position: absolute;
  height: 36px;
  background: orange;
  padding: 0px 10px;
  bottom: -5%;
  border: 1px solid black;
}

.center-text {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.3);
}

<div class="relative center-text">
  Relative Block
  <div class="absolute-block center-text">Absolute Block</div>
</div>

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

— Дхаваль Ярдош
джерело

на моєму екрані -Firefox 68.x, він просто не вирівнюється, абсолютний блок з’являється внизу відносного блоку

— Веб-жінка

Ви можете спробувати це display: -webkit-flex;?

— Дхаваль Ярдош

7

Наскільки я знаю, цього неможливо досягти за невідомої ширини.

Ви можете - якщо це працює у вашому сценарії - абсолютно розташувати невидимий елемент зі 100% шириною та висотою, а також розмістити в ньому елемент із використанням поля: auto та можливо вертикального вирівнювання. Інакше для цього вам потрібен Javascript.

— Пекка
джерело

+1 для речі "margin: auto". Я раніше це пробував, щоб горизонтально центрувати діл, використовуючи рядок "margin: 0 auto" - "0", що застосовується до вертикальних полів, і "auto" по горизонталі. Я думаю, що саме це використовує StackOverflow для діва верхнього рівня, щоб отримати 2 товсті білі рамки вниз по сторонах сторінки. Однак на сторінці W3Schools на полі CSS зазначено автоматичне значення, що "Результат цього залежить від браузера" - я особисто не пробував це в багатьох різних браузерах, тому я не можу коментувати цей момент (але це очевидно робить трюк в деяких з них)

— Steg

1

можливо невідома ширина (і висота), якщо IE8 не є проблемою. Детальну інформацію див. У моїй відповіді.

— ProblemsOfSumit

7

Я хотів би додати відповідь до @ bobince:

<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>
</body>

Удосконалено: /// це робить горизонтальну смугу прокрутки не відображатися з великими елементами в центрі поділки.

<body>
    <div style="width:100%; position: absolute; overflow:hidden;">
        <div style="position:fixed; 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>
    </div>
</body>

— Флакон
джерело

6

Ось корисний плагін jQuery для цього. Знайдено тут . Я не думаю, що це можливо тільки з CSS

/**
 * @author: Suissa
 * @name: Absolute Center
 * @date: 2007-10-09
 */
jQuery.fn.center = function() {
    return this.each(function(){
            var el = $(this);
            var h = el.height();
            var w = el.width();
            var w_box = $(window).width();
            var h_box = $(window).height(); 
            var w_total = (w_box - w)/2; //400
            var h_total = (h_box - h)/2;
            var css = {"position": 'absolute', "left": w_total+"px", "top":
h_total+"px"};
            el.css(css)
    });
};

— Бен Шелок
джерело

це кращий спосіб, і особливо з резонансним дизайном.

— m4tm4t

Було б тривіально, якби jQuery в будь-якому випадку використовувався

— Whisperer Code

8

це НЕ кращий спосіб. Завжди краще використовувати CSS, коли це можливо. Центрування DIV можливе за допомогою CSS в кожній осі, а також для чуйних сторінок. Немає необхідності в JavaScript!

— ПроблемиOfSumit

1

@yckart, і в цьому випадку інструментом є CSS.

— ProblemsOfSumit

5

версія sass / compass Responsive Solution вище:

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}

— Адам Спенс
джерело

4

transform: translate(-50%, -50%)робить текст та весь інший вміст розмитим на OS X за допомогою веб-браузерів. keithclark.co.uk/articles/gpu-text-rendering-in-webkit

— Yasha

Просто використовуйте той тип антиалізингу, який вам подобається. -webkit-font-smoothing: antialiased;Я це зрозумів із статті, яку ви опублікували до речі!

— Адам Спенс

4

Мій бажаний метод центрування:

position: absolute;
margin: auto;
width: x%

абсолютне позиціонування блокового елемента
маржа авто
те саме ліво / право, зверху / внизу

JSFiddle тут

— vp_arth
джерело

4

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

<div class="container><p>My text</p></div>

.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}

— Алан
джерело

Це відповідь @Matthias Weiler через 5 років.

— aloisdg переходить на codidact.com

3

Я знаю, що я вже дав відповідь, і моя попередня відповідь, разом з іншими даними, працює добре. Але я раніше це використовував, і це працює краще в певних браузерах і в певних ситуаціях. Тому я подумав, що і я даю цю відповідь. Я не "редагував" свою попередню відповідь і додав її, тому що вважаю, що це абсолютно окрема відповідь, і два надані мною не пов'язані.

HTML:

<div id='parent'>
  <div id='child'></div>
</div>

CSS:

#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}

— Дастін Пуассан
джерело

3

#container
{
  position: relative;
  width: 100%;
  float:left
}
#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}

— Бурку АККАОГЛУ
джерело

2

HTML

<div id='parent'>
  <div id='centered-child'></div>
</div>

CSS

#parent {
  position: relative;
}
#centered-child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
}

http://jsfiddle.net/f51rptfy/

— Дастін Пуассан
джерело

2

Це рішення працює, якщо в елемента є widthіheight

.wrapper {
  width: 300px;
  height: 200px;
  background-color: tomato;
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  background-color: deepskyblue;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

<div class="wrapper">
  <div class="content"></div>
</div>

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

— Пн.
джерело

2

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

top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

display: flex;
align-items: center;

figure {
  position: relative;
  width: 325px;
  display: block
}


figcaption{
   
    position: absolute;
    background: #FFF;
    width: 120px;
    padding: 20px;

    -webkit-box-shadow: 0 0 30px grey;
    box-shadow: 0 0 30px grey;
    border-radius: 3px;
    display: block;
    
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    display: flex;
    align-items: center;
}

<figure>
  <img  src="https://picsum.photos/325/600">
  <figcaption> 
			But as much
    </figcaption>
                
</figure>

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

— Маркогомеср
джерело

1

HTML:

<div class="wrapper">
    <div class="inner">
        content
    </div>
</div>

CSS:

.wrapper {
    position: relative;

    width: 200px;
    height: 200px;

    background: #ddd;
}

.inner {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;

    width: 100px;
    height: 100px;

    background: #ccc;
}

Цей та інші приклади тут

1

Це хитрість, яку я з'ясував, щоб DIV плавав саме в центрі сторінки. Дійсно потворно звичайно, але працює у всьому

Крапки та тире

<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5">
    <table style="position:fixed;" width="100%" height="100%">
        <tr>
            <td style="width:50%"></td>
            <td style="text-align:center">
                <div style="width:200;border: 5 dashed green;padding:10">
                    Perfectly Centered Content
                </div>
            </td>
            <td style="width:50%"></td>
        </tr>
    </table>
</div>

Очисник

Ух, що п'ять років просто пролетіли, чи не так?

<div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;padding:5px">
<table style="position:fixed" width="100%" height="100%">
    <tr>
        <td style="width:50%"></td>
        <td style="text-align:center">
            <div style="padding:10px">
                <img src="Happy.PM.png">
                <h2>Stays in the Middle</h2>
            </div>
        </td>
        <td style="width:50%"></td>
    </tr>
</table>

— П. Б
джерело

1

.center {
  position: absolute
  left: 50%;
  bottom: 5px;
}

.center:before {
    content: '';
    display: inline-block;
    margin-left: -50%;
}

— АндрейП
джерело

0

Ви можете розмістити зображення у div та додати div ID та мати CSS для цього div text-align:center

HTML:

<div id="intro_img">

    <img src="???" alt="???">

</div>

CSS:

#intro_img {
    text-align:center;
}

— Dworvin Vonstrangle
джерело

0

#content { margin:0 auto; display:table; float:none;}

<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

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

— amit bende
джерело

0

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

<div id="wrapper">
  <div id="block"></div>
</div>

#wrapper { position: absolute; width: 100%; text-align: center; }
#block { display: inline-block; }

Властивість вирівнювання тексту може бути додана до набору правил #block, щоб вирівняти його вміст незалежно від вирівнювання блоку.

Це працювало на останніх версіях Firefox, Chrome, IE, Edge та Safari.

— Теренс Бандоян
джерело