Выравнивание по центру на абсолютно позиционированном элементе Div

93

div#thing {
  position: absolute;
  top: 0px;
  z-index: 2;
  margin: 0 auto;
}

<div id="thing">
   <p>text text text with no fixed size, variable font</p>
</div>

Div находится наверху, но я не могу центрировать его с помощью <center>или margin: 0 auto;

html css xhtml

— Стив
источник

152

Ваша проблема может быть решена, если вы укажете divфиксированную ширину следующим образом:

div#thing {
    position: absolute;
    top: 0px;
    z-index: 2;
    width:400px;
    margin-left:-200px;
    left:50%;
}

— JacobE
источник

1

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

— Aayush

1

что, если пользователь вертикально прокрутил вниз, div появляется в верхней части страницы, а он должен отображаться в видимой области

— PUG

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

— PUG

4

это только обходной путь, stackoverflow.com/questions/1776915/… кажется решением

— PUG

1

Это неправильный ответ. Другой тип носителя не поддерживает этот фрагмент.

— Сушан

97

div#thing
{
    position: absolute;
    width:400px;
    right: 0;
    left: 0;
    margin: auto;
}

— Матеус Оливейра
источник

3

Как это работает? Не могли бы вы объяснить, почему ваш ответ верен?

— afuzzyllama

1

Мне очень нравится этот метод в 99% случаев, вам не нужно иметь дело с отступами, границами и т. Д. Я никогда не видел, чтобы это терпело неудачу, в следующий раз приведите пример, если это не поможет вам.

— Дэн

1

Отличная особенность этого решения в том, что оно работает и с процентами, только не уверен, что оно кроссбраузерно совместимо

— maljukan

1

Вот это да. Я не ожидал, что это сработает, но для меня это сработало как шарм

— Аваис Умар

4

Я согласен с тем, что это должен быть правильный ответ, маржа -200 пикселей кричит мне как взломать.

— Mani5556

36

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

Попробуй это:

// Horizontal example.
div#thing {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

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

// Vertical example.
div#thing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

— Майкл Джованни Пумо
источник

1

Вааат. Это круто! Не могли бы вы объяснить, как это работает? Изменить: немного поохотился, и похоже, что слева: 50% перемещает левое местоположение div в центр, который на самом деле не центр. Но translateX сдвигает его назад на 50% ширины контента

— Азиз Джавед

2

Абсолютное позиционирование будет располагаться от верхнего левого угла элемента. Использование translate сдвинет его на сумму относительно его размера.

— Майкл Джованни Пумо

3

Майкл, просто хотел, чтобы вы знали, вы не опоздали на вечеринку ... и для тех, кто не знает: transform: translate (-50%, -50%); выполняет как вертикальное, так и горизонтальное центрирование с помощью 1 линии

— Marvel Moe

4

Чтобы центрировать его как по вертикали, так и по горизонтали, сделайте следующее:

div#thing {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

— Армин
источник

0

Если вам необходимо иметь относительную ширину (в процентах), вы можете обернуть свой div в абсолютное позиционирование:

div#wrapper {
    position: absolute;
    width: 100%;
    text-align: center;
}

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

— Dalvallana
источник

0

У меня была такая же проблема, и моим ограничением было то, что у меня не может быть предопределенной ширины. Если ваш элемент не имеет фиксированной ширины, попробуйте это

div#thing 
{ 
  position: absolute; 
  top: 0px; 
  z-index: 2; 
  left:0;
  right:0;
 }

div#thing-body
{
  text-align:center;
}

затем измените свой html, чтобы он выглядел так

<div id="thing">
 <div id="thing-child">
  <p>text text text with no fixed size, variable font</p>
 </div>
</div>

— Усман Шаукат
источник

0

Или вы можете использовать относительные единицы, например

#thing {
    position: absolute;
    width: 50vw;
    right: 25vw;
}

— Алексей
источник

0

.contentBlock {
    width: {define width}
    width: 400px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
 
}

Развернуть фрагмент

— Панвар
источник

-22

Да:

div#thing { text-align:center; }

5

Это выровняет содержимое внутри div. Он не будет выравнивать div по центру страницы. Он также не будет выравнивать абсолютно позиционированный div каким-либо образом, кроме его содержимого, которое является частью потока документов.

— CarterMan