Расположение элемента в центре экрана

439

24 ноября 2016, 10:21

Подскажите пожалуйста, как расположить блок точно в середине экрана,по горизонтали можно через margin : 0 auto, а как сделать по вертикали?

Answer 1

Вариантов масса.
1. С помощью line-height
2. Абсолютным позиционированием
3. С помощью padding
4. С помощью таблиц
5. С помощью flexbox
6. С помощью transform
7. С применением отрицательного margin-top
8. С помощью псевдоэлемента :before
Выбирайте любой, какой вам больше нравится.

Выравнивание с помощью :before :
Данный способ работает только если внутренний блок не имеет абсолютного позиционирования.

.wrapper { 
  text-align: center; 
  // другие стили для блока-родителя 
  display: block; 
  height: 200px; 
} 
.wrapper:before { 
  content: ""; 
  display: inline-block; 
  height: 100%; 
  vertical-align: middle; 
} 
.inner { 
  display: inline-block; 
  vertical-align: middle; 
  // другие стили для внутреннего блока 
}

<div class="wrapper"> 
  <div class="inner">Lorem ipsum</div> 
</div>

Answer 2

Можно использовать flex свойство, а можно так:

.par { 
  width: 200px; 
  height: 200px; 
  border: 1px solid #000; 
display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
} 
 
.ch { 
  width: 5px; 
  height: 5px; 
  background-color: red; 
  display: inline-block; 
  }

<div class="par"><div class="ch"></div></div>

Answer 3

Можно так через flexbox:

* { 
  margin: 0; 
  padding: 0; 
} 
body, 
html { 
  height: 100%; 
} 
#cont { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  height: 100%; 
} 
#cont div { 
  width: 50px; 
  height: 50px; 
  background-color: #f1f1f1; 
}