How to center this green container vertically?

https://codepen.io/gtrman97/pen/poPgwer

1 Like

Did you mean something like this;

body {
  display: flex; 
  border: solid 2px green; 
  justify-content: center; 
  margin: auto; 
  max-width: 110px; 
  padding: 70px 0px 70px 0px

}

.sec1 {
  border: solid 2px red; 
  text-align: center; 
  max-width: 50px; 
  flex-basis: 10em; 
}
.sec2 {
  border: solid 2px blue; 
  text-align: center; 
  max-width: 50px; 


}

@brightonkalenga,

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like

No I want the green border centered vertically in terms of the whole page. Right now the green border is stuck to the top of the page. I want there to be equal padding/white space all around the green border centered in the page.

In that case just make sure the padding values all have the same figures.

That green container is the body of the page, so basically it IS the page, it always starts at the top. You can nudge it down with margins, but it would make more sense to add another div to your HTML:

<body>
  <div class="green-border">
    <section class="sec1">Section 1</section>
    <section class="sec2">Section 2</section>
  </div>
</body>

Then center it by setting

html {
  height:100%;
}

body {
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

.green-border {
  border: solid 2px green; 
}

styling the body as a container of your elements doesn’t seem like a good idea,
I edited it you can check my code, read it, understand it and correct your mistakes

<body>
  <div class="container">
    <section class="sec1">Section 1</section>
    <section class="sec2">Section 2</section>
  </div>
</body>
body, .container {
  display: flex; 
  justify-content: center;
  align-items: center;
}
body{
   min-height: 100vh; 
}
.container{
  width: 350px;
  border: 2px solid green
}
section{
  text-align: center; 
  max-width: 50px; 
}
.sec1 {
  border: solid 2px red; 
}
.sec2 {
  border: solid 2px blue; 
}

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.