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

<p>мне нужно разместить элемент <code>div</code> (с <code>position:absolute;</code>) в центре моего окна. но у меня проблемы с этим, потому что<strong> ширина неизвестна </strong>.</p><p>я попробовал это. но это должно быть отрегулировано, поскольку ширина отзывчива.</p><pre><code>.center { left: 50%; bottom:5px; } </code></pre><p>есть идеи?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p>

<p>это работает для меня:</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#content { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 100px; /* need a specific value to work */ }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><body> <div> <div id="content"> i'm the content </div> </div> </body></code></pre> </div> </div> </p>

<h2>отзывчивое решение</h2><p>вот хорошее решение <strong>для адаптивного дизайна или неизвестных размеров</strong> в целом <em>если вам не нужна поддержка ie8 и ниже.</em></p><pre><code>.centered-axis-x { position: absolute; left: 50%; transform: translate(-50%, 0); } </code></pre><p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.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; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p><p> <a href="http://jsfiddle.net/6xo11zwv/2/">вот js fiddle</a> </p><p>подсказка в том, что <code>left: 50%</code> относится к родительскому элементу, а преобразование <code>translate</code> - к ширине/высоте элементов.</p><p>таким образом, вы получите идеально центрированный элемент с гибкой шириной как дочернего, так и родительского элемента. бонус: это работает, даже если ребенок больше, чем родитель.</p><p>вы также можете центрировать его по вертикали с помощью этого (и опять же, ширина и высота родителя и потомка могут быть полностью гибкими (и/или неизвестными)):</p><pre><code>.centered-axis-xy { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } </code></pre><p>имейте в виду, что вам также может понадобиться префикс <code>transform</code> vendor. например, <code>-webkit-transform: translate(-50%,-50%);</code></p>

<p>действительно хороший пост .. просто хотел добавить, если кто-то хочет сделать это с одним тегом div, тогда вот выход:</p><p>принимая <code>width</code> в качестве <code>900px</code>.</p><pre><code>#stylename { position: absolute; left: 50%; width: 900px; margin-left: -450px; } </code></pre><p>в этом случае нужно знать <code>width</code> заранее.</p>

<p><strong>абсолют центр</strong> </p><p><strong>html:</strong></p><pre><code><div class="parent"> <div class="child"> <!-- content --> </div> </div> </code></pre><p><strong>css:</strong> </p><pre><code>.parent { position: relative; } .child { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } </code></pre><p><strong>демо:</strong> <a href="http://jsbin.com/rexuk/2/">http://jsbin.com/rexuk/2/</a> </p><p>протестировано в google chrome, firefox и ie8</p><p>надеюсь это поможет :)</p>

<p>эта работа для вертикальной и горизонтальной </p><pre><code> #mycontent{ position: absolute; left: 0; right: 0; top:0; bottom:0; margin: auto; } </code></pre><p>и если вы хотите сделать элемент центром родителя, установите положение родителя относительно</p><pre><code> #parentelement{ position:relative } </code></pre><p>правка:</p><ul> <li><p>для вертикального центра выровняйте заданную высоту по вашему элементу. благодаря @raul</p></li> <li><p>если вы хотите сделать элемент центром родителя, установите положение родителя относительно</p></li> </ul>

<p>в поисках решения я получил ответы выше и мог сосредоточить содержимое на matthias weiler, но с помощью выравнивания текста.</p><pre><code>#content{ position:absolute; left:0; right:0; text-align: center; } </code></pre><p>работал с chrome и firefox.</p>

<p>я понимаю, что на этот вопрос уже есть несколько ответов, но я никогда не находил решения, которое бы работало почти во всех классах, которое также имеет смысл и является элегантным, поэтому вот мое решение после настройки кучки:</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.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; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="container"> <a class="cat-link" href="">category</a> <div class="color-block"></div> </div></code></pre> </div> </div> </p><p>это говорит о том, что дайте мне <code>top: 50%</code> и <code>left: 50%</code>, затем преобразуйте (создайте пространство) на обеих осях x/y в значение <code>-50%</code>, в некотором смысле «создайте зеркальное пространство».</p><p>таким образом, это создает одинаковое пространство во всех 4 точках элемента div, который всегда является прямоугольником (имеет 4 стороны).</p><p>это будет:</p><ol> <li>работайте без необходимости знать высоту/ширину родителя.</li> <li>работайте на отзывчивом.</li> <li><strong> работа на оси x или y. или оба, как в моем примере. </strong></li> <li>я не могу придумать ситуацию, когда это не работает.</li> </ol>

<p>работает на любой случайной неизвестной ширине элемента с абсолютным позиционированием, который вы хотите иметь в центре вашего элемента контейнера. </p><p><strong> <a href="https://jsfiddle.net/pfm2v38o/">демо</a> </strong></p><pre><code><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; } </code></pre>

<p>я хотел бы добавить к ответу @ bobince:</p><pre><code><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> </code></pre><p>улучшено: /// теперь горизонтальная полоса прокрутки не отображается с большими элементами в центрированном элементе div.</p><pre><code><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> </code></pre>

<p>вот полезный плагин jquery для этого. найдено <a href="http://markmail.org/message/3jeuh2bj2wnzpvq7">здесь</a> . я не думаю, что это возможно чисто с помощью css</p><pre><code>/** * @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) }); }; </code></pre>

<p>мой предпочтительный метод центрирования:</p><pre><code>position: absolute; margin: auto; width: x% </code></pre><ul> <li>абсолютное позиционирование блочного элемента</li> <li>маржа авто</li> <li>то же самое слева/справа, сверху/снизу </li> </ul><p>jsfiddle <a href="http://jsfiddle.net/vp\_arth/yntrc/1/">здесь</a> </p>

<p>это сработало для меня:</p><pre><code><div class="container><p>my text</p></div> .container{ position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; } </code></pre>

<p>версия sas/compass responsive solution выше:</p><pre><code>#content { position: absolute; left: 50%; top: 50%; @include vendor(transform, translate(-50%, -50%)); } </code></pre>

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

<p>я знаю, что уже предоставил ответ, и мой предыдущий ответ, наряду с другими, вполне нормально работает. но я использовал это в прошлом, и это работает лучше в определенных браузерах и в определенных ситуациях. поэтому я подумал, что я тоже дам этот ответ. я не «редактировал» свой предыдущий ответ и не добавлял его, потому что чувствую, что это совершенно отдельный ответ, и два, которые я предоставил, не связаны между собой.</p><p>html:</p><pre><code><div id='parent'> <div id='child'></div> </div> </code></pre><p>css:</p><pre><code>#parent { display: table; } #child { display: table-cell; vertical-align: middle; } </code></pre>

<p>flex можно использовать для центрирования абсолютного позиционного элемента div.</p><pre><code>display:flex; align-items:center; justify-content:center; </code></pre><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.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); }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="relative center-text"> relative block <div class="absolute-block center-text">absolute block</div> </div></code></pre> </div> </div> </p>

<p>это решение работает, если элемент имеет <code>width</code> и <code>height</code> </p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.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; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="wrapper"> <div class="content"></div> </div></code></pre> </div> </div> </p>

<p>это трюк, который я понял для того, чтобы заставить div плавать точно в центре страницы. действительно некрасиво конечно, но работает во всех</p><p><strong> точки и тире </strong></p><pre><code><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> </code></pre><p><strong> очиститель </strong></p><p>вау, что пять лет пролетели незаметно, не так ли?</p><pre><code><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> </code></pre><p></p>

<p>решение этого вопроса не сработало для моего случая .. я делаю подпись для некоторых изображений и я решил использовать это</p><pre><code>top: 0; left: 0; right: 0; margin-left: auto; margin-right: auto; display: flex; align-items: center; </code></pre><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>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; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><figure> <img src="https://picsum.photos/325/600"> <figcaption> but as much </figcaption> </figure></code></pre> </div> </div> </p>

<p>html</p><pre><code><div id='parent'> <div id='centered-child'></div> </div> </code></pre><p>css</p><pre><code>#parent { position: relative; } #centered-child { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto auto; } </code></pre><p> <a href="http://jsfiddle.net/f51rptfy/">http://jsfiddle.net/f51rptfy/</a> </p>

<p>html:</p><pre><code><div class="wrapper"> <div class="inner"> content </div> </div> </code></pre><p>css:</p><pre><code>.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; } </code></pre><p>это и другие примеры <a href="http://jsfiddle.net/j83hm/2/">здесь</a> </p>

<p>вы также можете создать поле промежуточного программного обеспечения <code>div#centered</code>, центрированное со свойствами <code>absolute</code>, <code>left</code> и <code>right</code> и без свойства <code>width</code>, а затем установить основное содержимое <code>div</code> в качестве его дочернего элемента с полем <code>display:inline-block</code> и центрировать его с помощью <code>text-align:center</code> для его родительского поля промежуточного программного обеспечения</p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#container{ position: relative; width: 300px; height: 300px; border: solid 1px blue; color:#dddddd; } #centered{ position: absolute; text-align: center; margin: auto; top: 20px; left:0; right:0; border: dotted 1px red; padding: 10px 0px; } #centered>div{ border: solid 1px red; display:inline-block; color:black; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="container"> hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world <div id="centered"> <div> hello world <br/> i don't know my width<br/> but i'm still absolute! </div> </div> </div></code></pre></div> </div>

<p>это смесь других ответов, которые работали для нас:</p><pre><code> position: absolute; top: 50%; margin: auto; transform: translate(-50%, -50%); </code></pre>

<pre><code>.center { position: absolute left: 50%; bottom: 5px; } .center:before { content: ''; display: inline-block; margin-left: -50%; } </code></pre>

<p>если вам нужно центрировать по горизонтали и вертикали тоже:</p><pre><code>left: 50%; top: 50%; transform: translate(-50%, -50%); </code></pre>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#content { margin:0 auto; display:table; float:none;}</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><body> <div> <div id="content"> i'm the content </div> </div> </body></code></pre> </div> </div> </p>

<p>вы можете поместить изображение в элемент div, добавить идентификатор элемента div и иметь css для этого элемента div иметь <code>text-align:center</code></p><p>html:</p><pre><code><div id="intro\_img"> <img src="???" alt="???"> </div> </code></pre><hr><p>css:</p><pre><code>#intro\_img { text-align:center; } </code></pre>

<p>простой подход, который работал для меня, чтобы горизонтально центрировать блок неизвестной ширины:</p><pre><code><div id="wrapper"> <div id="block"></div> </div> </code></pre><hr><pre><code>#wrapper { position: absolute; width: 100%; text-align: center; } #block { display: inline-block; } </code></pre><p>свойство text-align можно добавить в набор правил #block, чтобы выровнять его содержимое независимо от выравнивания блока.</p><p>это работало на последних версиях firefox, chrome, ie, edge и safari.</p>