Как центрировать блок по вертикали и горизонтали?

Question

[keche]

Как центрировать блок по горизонтали и вертикали, с шириной контейнера 100% и высотой в 100%.
На подобии как в модальном окне.
Сам этот блок, не должен иметь фиксированную высоту или ширину, а чтобы при добавлении текста или других блоков в него, он расширялся.

Comments

[AlexUnknow]

Куда кроссбразрно будет, если использовать следущий вариант (фиксированное значением, при резиновой аналогично, только в % соотношении):

width: 100px;
height: 100px;
border: 1px solid red;
position: absolute;
top: 50%;
margin-top: -50px;
left: 50%;
margin-left: -50px;

Answer 1

[rinatoptimus]

Попробуйте:

.test {
  min-width: 100px;
  min-height: 100px;
  border: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Comments

[keche]

Спасибо, работает.

[cssfish]

keche, тут только надо помнить, что transform может замыливание блока вызывать. т.е. если там текст и т.п., то могут быть проблемы. А так метод хороший, спору нет.

Answer 2

[Максим Тимофеев]

Есть же поиск, а в нем "Нашлось 72 млн результатов", вот первый попавшейся: https://ruseller.com/lessons.php?id=1248

Comments

[keche]

Считаешь себя самым умным, что посылаешь в поиск?
Я уже перелопатил кучу информации, пока не нашел подходящего метода.
Не пиши вообще если по вопросу сказать нечего.

[Максим Тимофеев]

keche, Я же дал ссылку не на поиск, а на конкретный гайд. Претензия не понятна. Надо было скопировать оттуда текст и вставить сюда?

Answer 3

[Павел]

howtocenterincss.com

Comments

[cssfish]

прикольно. накипело видать у чувака )

[Kovalsky]

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

Answer 4

[Максим]

можно с помощью флексов https://codepen.io/infernotiv/pen/KXPpwX
а можно с помощью абсолютного позиционирования и трансформаций https://codepen.io/infernotiv/pen/MEgwaV

Answer 5

[Владимир]

https://jsfiddle.net/ghccgc8q/1/

the-echoplex.net/flexyboxes