Абсолютно позиционированный элемент по центру даже при изменении размера окна - PullRequest
Новая
       6

Абсолютно позиционированный элемент по центру даже при изменении размера окна

0 голосов
/ 29 декабря 2011

Существует множество статей о центрировании абсолютно позиционированного элемента, но все они для фиксированных размеров и фиксированного окна.

Однако размеры позиции: абсолютный элемент, который я хочу центрировать, являются переменными(mxn-width) в зависимости от размера браузера.Я хочу, чтобы мой элемент оставался горизонтально центрированным независимо от размера окна и даже когда пользователь меняет размер окна.

Этого можно достичь без JS?

Ответы [ 3 ]

0 голосов
/ 29 декабря 2011

Вы можете сделать это: 

#myDiv {
width:40px;
height:40px;
position:absolute;
top:50%;
left:50%;
}

Примите во внимание, что проценты должны быть скорректированы в зависимости от размера вашего div.Если у вас есть элемент шириной 400px и вы используете левый 50%, он не будет точно посередине, потому что он вычисляет 50% от левой границы вашего div, а не от центра div.

0 голосов
/ 28 января 2013

Используя проценты, элемент блока может быть сделан по центру, независимо от размера элемента или окна браузера. Это достигается установкой верхнего левого угла элемента к центру экрана с помощью left:50%; и top:50%;, а затем смещением назад на 25% с помощью margin:-25%;.

Высота и ширина также должны быть установлены на 50%. Установка верхнего и левого (и / или нижнего и правого) вытягивает блок из нормального потока и обрабатывает его так же, как position:fixed и position:absolute. Таким образом, он находится на другом z-index слое и будет перекрывать элементы, находящиеся в нормальном потоке.

Этот класс CSS, примененный к <div>, делает его вдвое меньше окна браузера, как по горизонтали, так и по вертикали, и центрирует его. Поскольку <div> не будет в нормальном потоке, это хорошо работает для создания всплывающих окон с чистым CSS ... 

.blockCenter {
  display:  block;
  height:   50%;
  left:     50%;
  margin:   -25%;
  top:      50%;
  width:    50%;
}

Вместо того, чтобы иметь ширину 50% и высоту 50%, этот класс будет иметь элемент шириной 50% и высотой 90%. Обратите внимание, что верхнее поле всегда должно быть отрицательным на половину высоты, чтобы держать его по центру ... 

.blockCenterTall {
  display:  block;
  height:   90%;
  left:     50%;
  margin:   -45% -25%;
  top:      50%;
  width:    50%;
}
0 голосов
/ 29 декабря 2011

Насколько я понимаю, ваша проблема может быть решена с помощью 

# divId {
  margin-left: auto;
  margin-right: auto;
  max-width: 300px;
}
...