justify-content distributes items on the main axis: flex-start, center, space-between, space-around, space-evenly. align-items aligns on the cross axis. Together, center+center is the famous one-line centering trick.
justify-content distributes items on the main axis: flex-start, center, space-between, space-around, space-evenly. align-items aligns on the cross axis. Together, center+center is the famous one-line centering trick.
<!doctype html><html><head><meta charset="utf-8">
<style>.c{display:flex;justify-content:center;align-items:center;height:160px;background:#140a28}.c div{background:#b388ff;color:#06040d;padding:16px}</style></head><body style="background:#06040d;padding:20px"><div class="c"><div>centered</div></div></body></html>