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

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

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

 
 Category 
  

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

Вы могли бы – если это работает в вашем сценарии – абсолютно позиционировать невидимый элемент со 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: 
 
   

  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"
	



  
Должны ли «использовать» директивы внутри или вне пространства имен?
  
Почему проверка равноценности одной переменной по многим значениям всегда возвращает true?