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

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

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

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

Любые идеи?

Ответы

Ответ 1

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

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

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

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

Ответ 5

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

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

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

Ответ 6

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

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

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

 #parentElement{
      position:relative
  }

изменить:

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

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

Ответ 7

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

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

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

Ответ 8

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

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

Ответ 9

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

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

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

Ответ 10

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

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

Ответ 11

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

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

Ответ 12

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

Ответ 13

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

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}

Ответ 14

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

Ответ 15

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

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

JSFiddle здесь

Ответ 16

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

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

Ответ 17

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

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

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

Ответ 18

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>

Ответ 19

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

Ответ 20

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

HTML:

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

CSS

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

Ответ 21

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/

Ответ 22

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

Ответ 23

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

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>

Ответ 24

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

Ответ 25

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

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

Ответ 26

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

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

Ответ 27

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

HTML:

<div id="intro_img">

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

</div>

CSS:

#intro_img {
    text-align:center;
}

Ответ 28

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

Ответ 29

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

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

Ответ 30

Вы также можете создать промежуточное поле 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>