центру - горизонтальное выравнивание css




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

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

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

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

Есть идеи?


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

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

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

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

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

Имейте в виду, что вам может потребоваться также префикс поставщика. Например -webkit-transform: translate(-50%,-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/


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

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

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

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

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


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

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

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

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


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

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

JSFiddle here


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

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


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

Demo

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

Это полезный плагин jQuery для этого. Найдено here . Я не думаю, что это возможно исключительно с помощью 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)
    });
};

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

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


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

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

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

Это трюк, который я понял, чтобы получить 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>


Я использовал аналогичное решение:

#styleName {
    position: absolute;
    margin-left: -"X"px;
}

Где «X» - половина ширины div, которую я хочу отобразить. Работает отлично для меня во всех браузерах.


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

.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 стороны).

Это будет:

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

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

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

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

 #parentElement{
      position:relative
  }

редактировать:

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

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


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

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

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


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


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






absolute