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

1078

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

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

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

Любые идеи?

css  css-position  center  absolute 
— Иш
источник
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);
}

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

Вот 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
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 стороны).

Это будет:

  1. Работайте без необходимости знать высоту / ширину родителя.
  2. Работайте на отзывчивом.
  3. Работайте на оси X или Y. Или оба, как в моем примере.
  4. Я не могу придумать ситуацию, когда это не работает.
— Дэниел Мосс
источник
Пожалуйста, дайте мне знать, если вы обнаружите ситуацию, когда это не работает, чтобы я мог отредактировать вопрос с вашим вкладом.
— Дэниел Мосс,
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;

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

— Давал Джардош
источник
на моем экране - 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
источник
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

Это решение работает, если элемент имеет 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

Простой подход, который работал для меня, чтобы горизонтально центрировать блок неизвестной ширины:

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

— Теренс Бандоян
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.