body уползает вниз от начала устраницы

Question

Почему так происходит?

body и html встают не так, как обычно. Раньше все было нормально, но почему-то теперь стало так.

html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="img/icon.png">
    <title>Кнопки</title>
</head>
<body>
    <div class="TEST"></div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/script.js"></script>
</html>"js/script.js"></script>
</html>

css:

* {
    margin: 0;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.TEST {
    width: 500px;
    height: 300px;
    background-color: black;
    margin-top: 50%;
    margin-left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

Если что, в js скриптах ничего нету

Answer 1

Для центрирования элементов лучше использовать flex.

css:

body {
  margin: 0;
  min-height: 100vh;
}

.container {
  min-height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
}

.test {
  width: 500px;
  height: 300px;
  background-color: black;
}

html:

  <div class="container">
    <div class="test"></div>
  </div>

БЛОГ НА HUSL

body уползает вниз от начала устраницы

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