Как выставить блок по центру экрана?

Question

У меня примерно вот такой случай, но не могу понять, как выставить text по центру экрана

.container{
  position: relative;
  width: 100%;
  height: 100%;
 }
 
.container .block {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: 50%;
  transform: translate(-50%,-50%);
 }
 
 .container .block span {
  color: #000;
  font-size: 35px;
 }

<div class='container'>
  <div class='block'>
    <span>TEXT</span>
  </div>
</div>

Answer 1

.container{
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
 }
 
 .container .block span {
  color: #000;
  font-size: 35px;
 }

<div class='container'>
  <div class='block'>
    <span>TEXT</span>
   </div>
</div>

Answer 2

У вас проблемы с самым контейнером container. Если хотите чтоб он был равен высоте экрана, задайте ему height: 100vh вместо height: 100%

Answer 3

Еще как вариант, добавить

html,
body{
  height: 100%;
}

html,
body{
  height: 100%;
}

body{
  margin: 0;
}

.container{
  position: relative;
  width: 100%;
  height: 100%;
 }
 
.container .block {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: 50%;
  transform: translate(-50%,-50%);
 }
 
 .container .block span {
  color: #000;
  font-size: 35px;
 }

<div class='container'>
  <div class='block'>
    <span>TEXT</span>
  </div>
</div>

БЛОГ НА HUSL

Как выставить блок по центру экрана?

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