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.
.first,
.second {
height: 50px;
width: 100%;
}
.first {
background-color: wheat;
}
.second {
align-self: center;
background-color: purple;
margin: auto 0;
transform: translateY(-50%);
}
.container {
background-color: silver;
height: 300px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
<div class="container">
<div class="first">
first
</div>
<div class="second">
second
</div>
</div>
Related Topics
How to Override Bootstrap CSS Styles
Vertically Centering a Div Inside Another Div
Stylesheet Not Loaded Because of Mime-Type
Auto Detect Mobile Browser (Via User-Agent)
List of Html5 Elements That Can Be Nested Inside P Element
How to Get the File Path from HTML Input Form in Firefox 3
Element Will Not Stay Centered, Especially When Re-Sizing Screen
How to Make an Image Center (Vertically & Horizontally) Inside a Bigger Div
Disabled Form Inputs Do Not Appear in the Request
How to Position Text Over an Image With Css
How to Disable a Link Using Only Css
Vertically Align an Image Inside a Div With Responsive Height
Mobile Redirect Using Htaccess
How to Remove Margin Space Around Body or Clear Default CSS Styles
Canvas Width and Height in Html5
How to Style the Parent Element When Hovering a Child Element
How to Vertically Center a Div Element For All Browsers Using Css