it-swarm.com.ru

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

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

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

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

Есть идеи?

947
Ish

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

1241
bobince

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

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

1698
Matthias Weiler

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

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

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

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

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

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

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

620
ProblemsOfSumit

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

Принимая width в качестве 900px.

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

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

48
pratikabu

Абсолют Центр 

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

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

31
Ijas Ameenudeen

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

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

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

 #parentElement{
      position:relative
  }

Правка:

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

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

30
Mohsen Abdollahi

В поисках решения я получил ответы выше и мог сосредоточить содержимое на Matthias Weiler, но с помощью выравнивания текста.

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

Работал с Chrome и Firefox.

19
cavila

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

.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%, в некотором смысле «создайте зеркальное пространство».

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

Это будет:

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

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

Демо

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

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

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

9
Pekka 웃

Я хотел бы добавить к ответу @ 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
Vial

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

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

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

JSFiddle здесь

4
vp_arth

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

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

.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
4
Alan

версия sas/compass Responsive Solution выше:

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}
4
Adam Spence
#container
{
  position: relative;
  width: 100%;
  float:left
}
#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}
3
Burcu AKCAOGLU

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

HTML:

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

CSS:

#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}
3
Dustin Poissant

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>

2
Dhaval Jardosh

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

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

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

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>

1
Marcogomesr

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/

1
Dustin Poissant

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
user3102226

Вы также можете создать поле промежуточного программного обеспечения div#centered, центрированное со свойствами absolute, left и right и без свойства width, а затем установить основное содержимое div в качестве его дочернего элемента с полем display:inline-block и центрировать его с помощью 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
Paweł

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

  position: absolute;
  top: 50%;
  margin: auto;
  transform: translate(-50%, -50%);
0
Crashalot
.center {
  position: absolute
  left: 50%;
  bottom: 5px;
}

.center:before {
    content: '';
    display: inline-block;
    margin-left: -50%;
}
0
AndreyP

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

left: 50%;
top: 50%;
transform: translate(-50%, -50%);
0
jabko87

#content { margin:0 auto; display:table; float:none;}
<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

0
amit bende

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

HTML:

<div id="intro_img">

    <img src="???" alt="???">

</div>

CSS:

#intro_img {
    text-align:center;
}
0
Dworvin Vonstrangle

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

<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
Terence Bandoian