Move flex items to the center

Centering flex items also depends on the orientation of the main axis. Just set justify-content and align-items to center to make it center horizontally and vertically.

Code Structure for center flex items
.flexcontainer {
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
}

Example


Code Structure for center flex items
.flexcontainer {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}

Example

Share this

Related Posts