0

Необходимо сделать выравнивание элемента по середине через 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 всё время прилипает к верху

1
  • margin: auto не выравнивает по вертикали 21 авг 2021 в 19:29

5 ответов 5

0

Старый добрый способ позиционирования блока по вертикали и горизонтали используя 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>

0

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>

5
  • Элемент не ставится в центр, это отчётливо видно
    – Polo
    21 авг 2021 в 19:20
  • я сделал под свой монитор, попробуйте менять проценты 21 авг 2021 в 19:27
  • Нужен универсальный метод
    – Polo
    21 авг 2021 в 19:29
  • обязательно использовать margin? нельзя например top и left? 21 авг 2021 в 19:36
  • @ArturHarutyunyan, сразу видно новенького в вебе) 22 авг 2021 в 4:04
0

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

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>

0

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

0

Если у вас высота блока уже задана в 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.