xxxxxxxxxx
/* Row centering */
div {
display: flex;
flex-direction: row; /* Optional -- default flex-direction is row */
justify-content: center; /* center horizontally */
align-items: center; /* center vertically */
}
/* Column centering */
div {
display: flex;
flex-direction: column;
justify-content: center; /* center vertically */
align-items: center; /* center horizontally */
}
xxxxxxxxxx
display: flex;
align-items: center;
justify-content: center;
/* order: vertical, horizontal */
/* If you need to access this quickly, just search for "fc" */
xxxxxxxxxx
/* HORIZONTAL */
justify-content: center;
/* VERTICAL */
align-items: center;
xxxxxxxxxx
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
xxxxxxxxxx
/* <div class="center">
* <div>some important stuff </div>
* </div>
*/
.center{
display: flex;
justify-content: center;
align-items: center;
}
xxxxxxxxxx
section {
width: 200px;
border: 1px solid #2d2d2d;
display: flex;
justify-content: center;
}
xxxxxxxxxx
.iconContainer{
display:inline-flex;
align-items:center;
justify-content: center;
height:50px;
width: 50px;
border:solid green 3px;
}
.iconLeft{
display: inline-block;
}
xxxxxxxxxx
/* how to center a div in css flexbox */
place-content: center center;
flex-flow: row wrap;
/* below two line is work fine and same for both flex and grid layout */
display: (grid or flex as your usecase);
justify-content: center;
align-items: center;
xxxxxxxxxx
.vertical-container {
height: 300px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}