how to align items center verticallt in html

Question

i want align these elements in my project to vertically center.I applied flex styling and given both the align items and justify content as center.horizontally the items are aligned to the centre but vertically it is not aligning to center.kindly fix this issue and help me to align the items into the centre vertically.

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Josefin+Sans:wght@300;400;600&family=Montserrat:wght@500;700&display=swap');

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

body{
    font-family: 'Josefin Sans', sans-serif;
    font-size: 16px;
}

header{
    display: none;
}

.container{
    min-width: 100vh;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="stylesheet" href="style.css">  
  <title>Frontend Mentor | Base Apparel coming soon page</title>

  
</head>
<body>
  <header>
    <img src="./images/logo.svg" alt="" class="logo">
  </header>
<div class="container">
    <div class="column1">
      <h1> We're coming soon</h1>
      <p>Hello fellow shoppers! We're currently building our new fashion store. 
        Add your email below to stay up-to-date with announcements and our launch deals.</p>

        <form action="#">
          <input type="text" placeholder="Email Address">
          <button type="submit"><img src="/images/icon-arrow.svg " ></button>
        </form>

    </div>
  </div>
  
  
  <footer>
    <p class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
      Coded by <a href="#">Your Name Here</a>.
    </p>
  </footer>
</body>
</html>

height 100% as a percentage of what? I can't see anything that has set a height. — A Haworth, Aug 26 '22 at 12:11

score 2 · Answer 1 · answered Aug 26 '22 at 11:45

2

Your container does not have any height, 100% is not height as it is 100% of parent. Add height: 100vh to container to center items.

answered Aug 26 '22 at 11:45

Taras

1,017
2
13

score 0 · Answer 2 · answered Aug 26 '22 at 12:35

You just have to provide a 100vh (viewport height) or any height of your choice to your container div and then give a width to the column1 div to see its center position.

Note: I put the 'background-color: skyblue' just to see the difference.

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Josefin+Sans:wght@300;400;600&family=Montserrat:wght@500;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 16px;
}

header {
  display: none;
}

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

.column1 {
  width: 80%;
  background: skyblue;
  padding: 20px;
}

footer {
  background: skyblue;
  padding: 20px;
}

<header>
  <img src="./images/logo.svg" alt="" class="logo">
</header>
<div class="container">
  <div class="column1">
    <h1> We're coming soon</h1>
    <p>Hello fellow shoppers! We're currently building our new fashion store. Add your email below to stay up-to-date with announcements and our launch deals.</p>

    <form action="#">
      <input type="text" placeholder="Email Address">
      <button type="submit"><img src="/images/icon-arrow.svg " ></button>
    </form>

  </div>
</div>


<footer>
  <p class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your Name Here</a>.
  </p>
</footer>

how to align items center verticallt in html

2 Answers2