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

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

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

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

Любые идеи?

+1014
источник поделиться
33 ответа
  • 1
  • 2

<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>
+1288
источник

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

#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>
+1747
источник
другие ответы

Связанные вопросы


Похожие вопросы

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

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

Ключ состоит в том, что left: 50% относится к родительскому, а преобразование translate относится к ширине и высоте элементов.

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

Вы также можете центрировать его по вертикали (и снова ширина и высота родительского и дочернего элементов могут быть полностью гибкими (и/или неизвестными)):

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

Имейте в виду, что вам может потребоваться префикс поставщика transform. Например -webkit-transform: translate(-50%,-50%);

+685
источник

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

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

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

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

+48
источник

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

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

Demo: http://jsbin.com/rexuk/2/

Протестировано в Google Chrome, Firefox и IE8

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

+33
источник

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

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

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

 #parentElement{
      position:relative
  }

изменить:

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

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

+31
источник

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

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

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

+19
источник

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

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

Что это значит, дайте мне top: 50% и left: 50%, а затем преобразуйте (создайте пространство) на оси X/Y на значение -50%, в некотором смысле "создайте зеркальное пространство".

Таким образом, это создает равное пространство во всех четырех точках div, которое всегда является полем (имеет 4 стороны).

Это будет:

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

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

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

<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;
}
+11
источник

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

left: 50%;
top: 50%;
transform: translate(-50%, -50%);
+11
источник

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

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

+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>
+7
источник

Это смесь других ответов, которая работает для нас:

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}
+7
источник

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

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

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

JSFiddle здесь

+4
источник

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

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}
+4
источник

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

<div class="container><p>My text</p></div>

.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
+4
источник

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>
+4
источник 
#container
{
  position: relative;
  width: 100%;
  float:left
}
#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}
+3
источник

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

HTML:

<div id='parent'>
  <div id='child'></div>
</div>

CSS

#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}
+3
источник

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>
+2
источник

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

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
источник 
.center {
  position: absolute
  left: 50%;
  bottom: 5px;
}

.center:before {
    content: '';
    display: inline-block;
    margin-left: -50%;
}
+1
источник

Вы можете поместить изображение в div и добавить id 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>
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.

0
источник

Вы также можете создать промежуточное поле div#centered с центрированными absolute, left и right свойствами и без свойства width а затем установить основное содержимое div как его дочерний элемент с display:inline-block box и text-align:center его с помощью text-align:center установленного для его родительская коробка промежуточного программного обеспечения

#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;
}
<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>
0
источник
  • 1
  • 2

Посмотрите другие вопросы по меткам или Задайте вопрос