How can I vertically center flexbox with two rows?-CodePudding

I'm creating a flexbox grid with two columns and I can't figure out how to vertically center it. I've tried to nest the whole thing within a flexbox, but it puts all of the divs on the same line instead of keeping the grid-like layout.

Any help is greatly appreciated.

EDIT: Sorry for the ambiguity. I would like for the two columns to be centered vertically on the page so they are halfway down the page instead of at the top, like they are now. I would still like them to be in two columns and one be on the left side of the page and the other on the right.

Relevant HTML:

.row {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.col {
  flex-basis: 50%;
}

<div >
  <div >Header1</div>
  <div >Header2</div>
</div>
<div >
  <div ><button>Click here</button></div>
  <div ><button>Click here</button></div>
</div>

CodePudding user response：

I hope I understood your question correctly...

To center your contents vertically, you need a wrapper element that has the full height of the window. So in my example below there's a "wrapper" element with 100% height which has display: flex, flex-direction: column; and justify-content: center in order to center it's contents vertically.

Also, for the height: 100% to be effective, you also need to apply that to all parent elements, in this case html and body:

html,
body {
  height: 100%;
}

.wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.row {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.col {
  flex-basis: 50%;
}

<div >
  <div >
    <div >Header1</div>
    <div >Header2</div>
  </div>
  <div >
    <div ><button>Click here</button></div>
    <div ><button>Click here</button></div>
  </div>
</div>

Note: If (theoretically) what you posted is already the whole contents of that page, you can also omit using the wrapper div at all and apply its settings to the body element.

CodePudding user response：

Have you tried something like this?

.grid {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  margin-right: 10px;
}

.grid .grid-item {
  display: flex;
  flex-direction: column;
  border: solid;
  border-width: 1px;
  border-color: lightgrey;
  padding: 10px;
  margin: 10px;
}

<div >
  <div >
      <div >Header1</div>
      <div ><button>Click here</button></div>
  </div>
  <div >
      <div >Header2</div>      
      <div ><button>Click here</button></div>
  </div> 
</div>

CodePudding user response：

Did you try this?

.row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.col {
    text-align: center;
}

<div >
    <div >Header1</div>
    <div >Header2</div>
</div>
<div >
    <div ><button>Click here</button></div>
    <div ><button>Click here</button></div>
</div>

CodePudding user response：

To do so you need to make rows 100% wide and instruct the container to break if children are wider than its width by adding flex-wrap property. Since its child is as much wide as the parent this will break for every new child. Lastly, you can fully center everything by adding the justify-content property to cols

.container {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.col {
  flex: 5;
  display: flex;
  justify-content: center;
}

.row {
 display: flex;
 width: 100%;
}

<div >
  <div >
      <div >Header1</div>
      <div >Header2</div>
  </div>
  <div >
      <div ><button>Click here</button></div>
      <div ><button>Click here</button></div>
  </div> 
</div>

But as @Heretic Monkey said it might be better to use grid