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

Question

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

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

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

.center {

  left: 50%;

  bottom:5px;

}

какие идеи?

695 26

css center css-position absolute

26 ответов:

Comments

Ничего не найдено.

bobince · Accepted Answer · 2016-09-09 12:41:38

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

Matthias Weiler · Accepted Answer · 2017-02-09 13:56:26

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

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

ProblemsOfSumit · Accepted Answer · 2017-07-14 20:52:51

Отзывчивый Решением

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

pratikabu · Accepted Answer · 2012-08-31 12:56:17

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

С width как 900px.
#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}
в этом случае надо знать width заранее.

Ijas Ameenudeen · Accepted Answer · 2017-03-24 11:38:50

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

HTML:
<div class="parent">
  <div class="child">
    
  </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

надеюсь, что это помогает :)

Mohsen Abdollahi · Accepted Answer · 2017-01-25 14:43:33

эта работа для вертикального и горизонтального
  #myContent{
        position: absolute;
        left: 0;
        right: 0;
        top:0;
        bottom:0;
        margin: auto;
   }
и если вы хотите сделать центр элемента родителя, установите положение родителя относительно
 #parentElement{
      position:relative
  }
edit:

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

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

cavila · Accepted Answer · 2013-05-29 04:36:45

поиск решения я получил ответы выше и мог бы сделать контент центрированным с помощью Matthias Weiler ответ, но с помощью выравнивания текста.
#content{
  position:absolute;
  left:0;
  right:0;
  text-align: center;
}
работал с chrome и Firefox.

Daniel Moss · Accepted Answer · 2017-11-26 20:28:04

Я понимаю, что у этого вопроса уже есть несколько ответов, но я никогда не находил решения, которое работало бы почти во всех классах, что также имеет смысл и элегантно, поэтому вот мое мнение после настройки группы:
.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 стороны).

Это:

Работа без необходимости знать высоту / ширину родителя.

работа над отзывчивым.

работа на любой оси X или Y. Или и то и другое, как в моем примере.

я не могу придумать ситуацию, где это не работает.

Pekka 웃 · Accepted Answer · 2009-11-22 00:00:08

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

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

Vial · Accepted Answer · 2013-01-28 20:58:14

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

Ben Shelock · Accepted Answer · 2009-11-22 00:05:35

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

vp_arth · Accepted Answer · 2014-04-20 09:46:16

мой предпочтительный метод центрирования:
position: absolute;
margin: auto;
width: x%
абсолютное позиционирование блочного элемента

margin auto

то же самое слева/справа, сверху/снизу

JSFiddle здесь

Adam Spence · Accepted Answer · 2015-04-01 14:16:07

Sass / compass версия отзывчивого решения выше:
#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}

Alan · Accepted Answer · 2016-05-24 15:25:27

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

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

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

Dustin Poissant · Accepted Answer · 2015-01-08 21:29:19

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

HTML:
<div id='parent'>
  <div id='child'></div>
</div>
CSS:
#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}

Burcu AKCAOGLU · Accepted Answer · 2015-11-25 15:35:03

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

lowtechsun · Accepted Answer · 2018-04-10 03:49:04

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

демо
<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;
}

score 1 · Accepted Answer · 2013-12-14 15:42:13

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

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

Dustin Poissant · Accepted Answer · 2014-10-16 03:09:50

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/

Mr. B · Accepted Answer · 2018-08-21 23:11:06

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

Muhammed · Accepted Answer · 2018-09-06 11:32:59

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

Dworvin Vonstrangle · Accepted Answer · 2013-11-28 17:09:49

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

HTML:
<div id="intro_img">

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

</div>
CSS:
#intro_img {
    text-align:center;
}

amit bende · Accepted Answer · 2017-01-02 07:58:04

#content { margin:0 auto; display:table; float:none;}

<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

Terence Bandoian · Accepted Answer · 2018-03-16 06:32:30

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

это работало на последних версиях Firefox, Chrome, IE, Edge и Safari.

Bartosz · Accepted Answer · 2013-02-04 19:29:15

я использовал аналогичное решение:
#styleName {
    position: absolute;
    margin-left: -"X"px;
}
где " X " - половина ширины div, которую я хочу отобразить. Отлично работает для меня во всех браузерах.

sebastian · Accepted Answer · 2013-11-28 16:58:53

старайтесь не использовать темную сторону CSS. Избегайте использования отрицательных значений для полей. Я знаю, что иногда вы вынуждены делать ужасные вещи, как margin-left: -450px, но, вероятно, вы могли бы сделать что-то вроде right: 450px. Это просто мой способ работать.