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

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

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

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

Есть идеи?

  
I am some centered shrink-to-fit content!
tum te tum

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

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

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

Вот хорошее решение для гибкого дизайна или неизвестных размеров в целом, если вам не нужно поддерживать 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; } 
 
I'm always centered
doesn't matter how much text, height or width i have.
The dimensions or my parent are irrelevant as well

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

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

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

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

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

HTML:

 

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

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

эта работа для вертикальной и горизонтальной

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

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

  #parentElement{ position:relative } 

редактировать:

  • для вертикального выравнивания по центру установите высоту для вашего элемента. благодаря @Raul

  • если вы хотите создать центр элемента родителя, установите положение родителя относительно

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

 #content{ position:absolute; left:0; right:0; text-align: center; } направо #content{ position:absolute; left:0; right:0; text-align: center; } 

Работал с хром и Firefox.

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

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

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

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

Я хотел бы добавить к ответу @ bobince:

  
I am some centered shrink-to-fit content!
tum te tum

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

  
I am some centered shrink-to-fit content!
tum te tum

Это полезный плагин 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) }); }; 

Мой предпочтительный метод центрирования:

 position: absolute; margin: auto; width: x% 
  • абсолютное позиционирование элемента блока
  • margin auto
  • одинаковый левый / правый, верхний / нижний

JSFiddle здесь

Sass / Compass версия реагирующего решения выше:

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

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

 

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

HTML:

 

CSS:

 #parent { display: table; } #child { display: table-cell; vertical-align: middle; } 
 #container { position: relative; width: 100%; float:left } #container .item { width: 50%; position: absolute; margin: auto; left: 0; right: 0; } 

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

демонстрация

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

HTML:

 
content

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

Это и другие примеры здесь

HTML

 

CSS

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

http://jsfiddle.net/f51rptfy/

Это трюк, который я понял, чтобы получить DIV, чтобы плавать точно в центре страницы. Действительно уродливый, конечно, но работает во всех

Точки и штрихи

 
Perfectly Centered Content

Очиститель

Ничего себе, что прошло пять лет, не так ли?

 

Stays in the Middle

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

HTML:

 
http://sofru.miximages.com/css/

CSS:

 #intro_img { text-align:center; } 
 #content { margin:0 auto; display:table; float:none;} 
  
I'm the content

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

 

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

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

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

Я использовал аналогичное решение:

 #styleName { position: absolute; margin-left: -"X"px; } 

Где «X» – половина ширины div, которую я хочу отобразить. Работает отлично для меня во всех браузерах.

Старайтесь не использовать темную сторону CSS. Избегайте использования отрицательных значений для полей. Я знаю, что иногда вы вынуждены делать ужасные вещи, такие как margin-left: -450px , но, вероятно, вы можете сделать что-то вроде right: 450px . Это просто мой способ работать.

  • Разница между style = "position: absolute" и style = "position: relative"
  • Interesting Posts

    Как отключить кнопку Android?

    Включить Entity Framework 6 для MySql (C #) в WinForms Microsoft Visual Studio 2013

    В чем разница между прокси-сервером и VPN?

    Получить дополнительные данные из структуры MVC5. Поставщик идентификации OAuth / OWin с внешним поставщиком авторизации

    Как добавить внешние библиотеки jar в проект android из командной строки

    Должен ли я освободить char *, инициализированный с использованием строковых литералов?

    Переименуйте группу файлов с помощью одной команды

    Инициализация указателя в отдельной функции в C

    Конструктор списка инициализаторов, заключенный в скобки

    Как вычислить ограничительную рамку для заданного местоположения lat / lng?

    Windows 8.1 Недостаточно места для создания теневой копии

    Отключить политику одинакового происхождения Firefox.

    Динамический диапазон диаграмм с помощью INDIRECT: эта функция недействительна (несмотря на выделение диапазона)

    Как удалить «знать» размер массива операндов?

    Java Reflection: как получить имя переменной?

    Давайте будем гением компьютера.