Не выравнивается блок посередине

Question

Необходимо сделать выравнивание элемента по середине через margin: auto, не через flex

<div class="wrapper">
 <div class="content"> 
 
 </div>
</div>

CSS:

html, body {
    margin: 0;
    padding: 0;
}

.wrapper {
    background-color: rgba(0, 0, 0, 0.8);  
    width: 100vw;
    height: 100vh;
    
}

.content {
    width: 50%;
    height: 50%;
    background-color: #fff;
    margin: auto;
}

Блок .content всё время прилипает к верху

Answer 1

html, body {
    margin: 0;
    padding: 0;
}
.wrapper{
  background-color: rgba(0, 0, 0, 0.8);  
    width: 100vw;
    height: 100vh;
    position: absolute;
}

.content{
  margin: 13% auto;
  width: 50%;
  height: 50%;
  background-color: white;
}

<div class="wrapper">
    <div class="content">
    </div>
</div>

Answer 2

Один из вариантов для автоматического выравнивания по центру использовать позиционирование

html, body {
    margin: 0;
    padding: 0;
}

.wrapper {
    background-color: rgba(0, 0, 0, 0.8);  
    width: 100vw;
    height: 100vh;
    position: relative;
}

.content {
    width: 50%;
    height: 50%;
    background-color: #fff;
    margin: auto;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

<div class="wrapper">
 <div class="content"> 
 
 </div>
</div>

Answer 3

если у тебя враппер имеет четкие ширину и высоту, выставь в контенте марджинами (лефт и топ) нужные позиции и все...

Answer 4

Старый добрый способ позиционирования блока по вертикали и горизонтали используя vertical-align и text-align, когда еще не было flex-модуля. Преимущество в том, что внутренний блок с текстом при наполнении способен растянуть родительский блок, что не работает в варианте с абсолютным позиционированием.

html, body {
  margin: 0;
  padding: 0;
}

.wrapper {
  background-color: rgba(0, 0, 0, 0.8);  
  line-height: 0;
  text-align: center;
}
.wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  width: 0; height: 100vh;
}

.content {
  width: 50%;
  background-color: #fff;
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  text-align: left;
}

<div class="wrapper"><div class="content"> 

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

</div></div>

Answer 5

Если у вас высота блока уже задана в 50% от родительского контейнера, то достаточно сместить его на 25% вниз, чтобы он оказался вертикально посередине: position:relative; top: 25%

html, body {
    margin: 0;
    padding: 0;
}

.wrapper {
    background-color: rgba(0, 0, 0, 0.8);  
    width: 100vw;
    height: 100vh;
    
}

.content {
    width: 50%;
    height: 50%;
    background-color: #fff;
    margin: auto;
    position: relative;
    top:25%;
}

<div class="wrapper">
 <div class="content"> 
 
 </div>
</div>

БЛОГ НА HUSL

Не выравнивается блок посередине

Ответы (5 шт):