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

1078

Мне нужно поместить div(с position:absolute;) элемент в центре моего окна. Но у меня проблемы с этим, потому что ширина неизвестна .

Я попробовал это. Но это должно быть отрегулировано, поскольку ширина отзывчива.

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

Любые идеи?

4

У вас есть пример в Абсолютном центре примеров, которые можно обобщать в разных ситуациях.

Mihai8

2

Есть лучший ответ на этот вопрос на stackoverflow.com/questions/17976995/…

Эндрю Свифт

1334

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

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

bobince
источник

76

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

BoomShaka

Что делать, если пользователь прокрутил страницу вниз, наверху появляется оверлей, как вы думаете, будет ли хорошей идеей использовать jquery для исправления проблемы с прокруткой

PUG

1

Одним из решений проблемы прокрутки может быть, position: fixedно что, если высота не известна для наложения, должны быть реализованы полосы прокрутки для наложения

PUG

3

С этой техникой я столкнулся с небольшой проблемой. Поскольку внешний блок занимает 50% экрана, происходит некоторое смещение, когда текст шире, чем 50% экрана. Я решил это, установив внешний div в «width: 100%» и удалив свойство left. Для внутреннего div я просто устанавливаю выравнивание текста по центру. Это решает проблему.

Ники Л.

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

необходимо установить ширину div, который будет центрирован - не будет работать автоматически, скажем, с кнопкой с текстом на нем.

Стефан

2

@ Joshua Это будет только по центру, а не по вертикали, как другой ответ.

ygoe

3

Я предпочитаю это решение, так как оно не увеличивает размер области просмотра.

Iceydee

13

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

Онур Йылдырым

768

Отзывчивое решение

Вот хорошее решение для адаптивного дизайна или неизвестных размеров в целом, если вам не нужна поддержка 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%);

ProblemsOfSumit
источник

26

С поддержкой IE7 больше нет необходимости, это должно быть де-факто решением. Это решение лучше, чем метод left: 0 / right: 0, так как это делает элементы полной ширины, в то время как это сохраняет ширину и работает с элементами неизвестной ширины.

aleemb

51

Безусловно лучший ответ, это работает, если поле, в котором находится div, меньше, чем child.

Дело

2

@ChadJohnson, конечно, это так. Попробуйте с webkit-префиксом, как я и предлагал.

Задачи из

2

Ах, я пропустил ваше замечание о -webkit. Потрясающие.

Чед Джонсон

3

transform: translateкажется position: fixedнепригодным для детей. Принятый ответ работает лучше в этом случае.

Дмвианна

49

Действительно хороший пост ... Просто хотел добавить, если кто-то хочет сделать это с одним тегом div, тогда вот выход:

Принимая widthкак 900px.

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

В этом случае нужно знать widthзаранее.

pratikabu
источник

26

"because the width is unknown"... это не отвечает на вопрос

Мишель Айрес

15

Привет @Michel На самом деле, когда вы ищете в Google что-то, связанное с центрированием абсолютного div, эта ссылка становится первой ссылкой. Вот почему я добавил это решение, если кто-то вроде меня ищет вышеуказанное решение .. :)

pratikabu

1

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

Шон Кендл

36

Абсолют Центр

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

Надеюсь это поможет :)

Ijas Ameenudeen
источник

Это не работает, пожалуйста, проверьте следующий 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

Я думаю, что вам нужно добавить высоту для вертикальной работы.

Рауль

Похоже, что это позиции в центре страницы, а не в центре другого элемента.

Гюнтер Цохбауэр

1

@ GünterZöchbauer да, если вы хотите сделать элемент центром родителя, установите положение родителя относительно.

Мохсен Абдоллахи

20

В поисках решения я получил ответы выше и мог сосредоточить контент на ответе Матиаса Вейлера, но с помощью выравнивания текста.

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

Работал с Chrome и Firefox.

cavila
источник

5

Я думаю, что вам не нужно "text-align: center"

Тобиас

Это решило мою проблему здесь . Спасибо!

Volomike

Мне нужен был «text-align: center», и это сработало, когда решение, предложенное @ProblemsOfSumit, не сработало, поскольку сделало перенос текста.

Nat

19

Если вам нужно центрировать по горизонтали и вертикали тоже:

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

michal.jakubeczy
источник

очень крутое исправление спасибо

Стэнли Бейтсвар

15

** ОТВЕТСТВЕННОЕ РЕШЕНИЕ **

Предполагая, что элемент в div, это еще один div ...

это решение отлично работает

<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%);
}

Crashalot
источник

Хорошее исправление, спасибо, мужик!

Стэнли Бейтсвар

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 точках элемента div, который всегда является прямоугольником (имеет 4 стороны).

Это будет:

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

Дэниел Мосс
источник

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

Дэниел Мосс,

transform / translate приведет к тому, что сафари сделает текст размытым в определенном масштабе

Джеймс Тан

@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 можно использовать для центрирования абсолютного позиционирования div.

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, он просто не выравнивается, в нижней части относительного блока появляется абсолютный блок

Webwoman

Ты можешь попробовать это display: -webkit-flex;?

Давал Джардош

7

Насколько я знаю, это невозможно достичь при неизвестной ширине.

Вы можете - если это работает в вашем сценарии - абсолютно позиционировать невидимый элемент со 100% шириной и высотой, и поместить элемент по центру, используя margin: auto и, возможно, выровнять по вертикали. В противном случае вам понадобится Javascript для этого.

Пекка
источник

+1 за «маржу: авто» вещь. Я пробовал это раньше, чтобы горизонтально центрировать div, используя строку «margin: 0 auto» - «0» применяется к вертикальным полям и «auto» к горизонтали. Я думаю, это то, что StackOverflow использует для самого верхнего уровня div, чтобы получить 2 толстых белых границы по краям страницы. Однако на странице W3Schools на полях CSS для автоматического значения указано, что «результат зависит от браузера» - я лично не пробовал его во многих различных браузерах, поэтому я не могу прокомментировать этот момент (но в некоторых из них это явно

срабатывает

1

это возможно для неизвестной ширины (и высоты), если IE8 не проблема. Смотрите мой ответ для деталей.

Задачи из

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>

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

<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 использовался в любом случае

Code Whisperer

8

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

Задачи

1

@yckart и в этом случае инструмент CSS.

Задачи из

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, используя браузеры webkit. keithclark.co.uk/articles/gpu-text-rendering-in-webkit

Яша

Просто используйте тот тип сглаживания, который вам нравится, -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;
}

Burcu AKCAOGLU
источник

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>

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

Marcogomesr
источник

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

AndreyP
источник

0

Вы можете поместить изображение в элемент div и добавить идентификатор элемента div, чтобы CSS для этого элемента div имел text-align:center

HTML:

<div id="intro_img">

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

</div>

CSS:

#intro_img {
    text-align:center;
}

Дворвин Вонстрангл
источник

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

Свойство text-align можно добавить в набор правил #block, чтобы выровнять его содержимое независимо от выравнивания блока.

Это работало на последних версиях Firefox, Chrome, IE, Edge и Safari.

Теренс Бандоян
источник

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

Ответы:

Отзывчивое решение