Center a Card Using Flexbox

CSS

Technical Specification

Center a card both vertically and horizontally on the page using Flexbox.

Input/Output Samples

Input:One card

Output:Screen-centered card

Optimal Logic Path

Use .container { display:flex; justify-content:center; align-items:center; height:100vh; }

Architectural Deep-Dive

Flexbox allows perfect centering in both directions using align-items & justify-content.