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

Question 1

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;

Question 2

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

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

Question 3

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

Question 4

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

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

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

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

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

Question 5

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

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

Question 6

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

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

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

Question 7

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

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>

Question 8

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

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

Question 9

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

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

Question 10

Да:

div#thing { text-align:center; }

Answer 1

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;

Answer 2

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

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

Сушан

Answer 3

1

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

Aayush

Answer 4

1

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

PUG

Answer 5

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

PUG

Answer 6

4

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

PUG

Answer 7

1

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

Сушан

Answer 8

97

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

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

3

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

afuzzyllama

1

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

Дэн

1

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

maljukan

1

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

Аваис Умар

4

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

Mani5556

Answer 9

3

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

afuzzyllama

Answer 10

1

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

Дэн

Answer 11

1

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

maljukan

Answer 12

1

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

Аваис Умар

Answer 13

4

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

Mani5556

Answer 14

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

Answer 15

1

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

Азиз Джавед

Answer 16

2

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

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

Answer 17

3

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

Marvel Moe

Answer 18

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

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

Answer 19

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

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

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

Answer 20

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

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>

Answer 21

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

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

Answer 22

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

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

Answer 23

-22

Да:

div#thing { text-align:center; }

источник

5

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

CarterMan

Answer 24

5

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

CarterMan

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

Ответы: