Flexbox: Center Horizontally and Vertically

Flexbox: center horizontally and vertically

I think you want something like the following.

html, body {
height: 100%;
}
body {
margin: 0;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: auto;
border: 1px solid blue;
}
.flex-item {
background-color: tomato;
padding: 5px;
width: 20px;
height: 20px;
margin: 10px;
line-height: 20px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
</div>

Flexbox center vertically and horizontally

Your container has no height settings, so it only uses as much vertical space as needed by its contents, therefore there will be no vertical centering. If you apply height: 100% to it (and also to body to have a reference height), it should work as desired.

Centering content horizontally using flexbox

The property justify-content:center aligns the flex-items along the flex direction - use align-items:center- see demo below:

.container {  display: flex;  flex-direction: column;  width: 600px;  background-color: blue;  justify-content: center;  align-items:center;/*NEW*/}.item {  max-width: 500px;  width: 250px;/*NEW*/  height: 100px;  background-color: yellow;  border: 2px solid red;}
<div class="container">  <div class="item"></div>  <section class="item"></section>  <section class="item"></section>  <footer class="item"></footer></div>

Center image vertically and horizontally in flexbox

.grid-right {
display: flex; /* new */
align-items: center; /* new */
justify-content: center; /* new */
width: 67%;
height: 100vh;
background-size: cover;
text-align: center;
}

revised codepen

Vertical and Horizontal Center Align with Flex box

.container{width:500px;height:200px;background-color:#333;display: flex;  justify-content: center;  align-items: center;}   h1{color:#fff;} 
<div class="container">   <h1>  Hello Wolrd  </h1></div>

How to center items vertically and handle overflows without cutting off content

One possible solution would be to not actually use justify-content: center; on .aligned, but just to vertically center this container it self. For this you may use auto marging like this:

.container {
background-color: aqua;
display: flex;
flex-direction: column;
height: 200px;
padding: 10px;
width: 120px;
}

.aligned {
background-color: yellow;
display: flex;
flex: 0 1 auto;
flex-direction: column;
margin: auto 0;
overflow-y: auto;
padding: 10px 0;
}
<div class="container">
<div>Sider Header (potential overflow)</div>
<div class="aligned">
<button>Item 1</button>
<button>Item 2</button>
<button>Item 3</button>
<button>Item 4</button>
<button>Item 5</button>
<button>Item 6</button>
<button>Item 7</button>
<button>Item 8</button>
<button>Item 9</button>
<button>Item 10</button>
<button>Item 11</button>
<button>Item 12</button>
</div>
<div>Sider Footer</div>
</div>

<div class="container">
<div>Sider Header (less content)</div>
<div class="aligned">
<button>Item 1</button>
<button>Item 2</button>
<button>Item 3</button>
<button>Item 4</button>

</div>
<div>Sider Footer</div>
</div>

Flexbox - center vertically second row

Normally you could set the vertical margins of the element with the class of .second to auto to center it but, the element with the class of .first pushes the centered element down just off center. You can fix this by setting a transform: translateY(-50%) on the centered element.