выравнивание по центру Flexbox

Question

ПОДСКАЖИТЕ ПОЖАЛУЙСТА,КАК ВЫРОВНЯТЬ ПО ЦЕНТРУ ЭКРАНА С ПОМОЩЬЮ FLEXBOX

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Images</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
      integrity="sha256-WAgYcAck1C1/zEl5sBl5cfyhxtLgKGdpI3oKyJffVRI="
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <div class="container">
      <div class="spinner">
        <span class="spinner-text">Loading...</span>
          <div class="rect"></div>
      </div>
    </div>
  </body>
</html>

CSS:

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

.spinner{
  display: flex;
  flex-direction: column;
}

.spinner-text{
  text-transform: uppercase;
  font-size: 16px;
  font-family: monospace;
}

.rect {
  position: relative;
  width: 10px;
  height: 4px;
  background-color: #000000;
  border-radius: 2px;
}

Answer 1

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1000px;
  width: 100%;
  display: block;
  margin: 0 auto;
  padding: 0 10px;
}

.intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}

.spinner {
  display: flex;
  flex-direction: column;
}

.spinner-text {
  text-transform: uppercase;
  font-size: 16px;
  font-family: monospace;
}

.rect {
  position: relative;
  width: 10px;
  height: 4px;
  background-color: #000000;
  border-radius: 2px;
}

<section class="intro">
  <div class="container">
    <div class="spinner">
      <span class="spinner-text">Loading...</span>
      <div class="rect"></div>
    </div>
  </div>
</section>

БЛОГ НА HUSL

выравнивание по центру Flexbox

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