---
title: "Discussion on \"React - Center a component horizontally and vertically\" | Hashnode"
description: "Discussion on \"React - Center a component horizontally and vertically\". To center a component horizontally and vertically in React, add the display:flex, justify-content: center and align-items: center to the react component CSS"
url: "https://hashnode.com/posts/react-center-a-component-horizontally-and-vertically/632321718350c8888bf310e0"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [React - Center a component horizontally and vertically](https://usamabhatti.hashnode.dev/react-center-a-component-horizontally-and-vertically?utm_source=hashnode&utm_medium=feed)

To center a component horizontally and vertically in React, add the display:flex, justify-content: center and align-items: center to the react component CSS

Sep 15, 2022 · 2 min read · usamabhatti.hashnode.dev  
Read the article

-   [#react-js](https://hashnode.com/tag/react-js)
-   [#html-css-react-self-taught](https://hashnode.com/tag/html-css-react-self-taught)
-   [#design-in-react](https://hashnode.com/tag/design-in-react)

## Written by

[Usama Bhatti](https://hashnode.com/@usamabhatti)

@usamabhatti

  
[View profile](https://hashnode.com/@usamabhatti)

Web Developer

## Responses 1

Markdown supported · ⌘↵ to post

[Max None](https://hashnode.com/@THXMAN)

[Dec 1, 2024](https://hashnode.com/posts/react-center-a-component-horizontally-and-vertically/632321718350c8888bf310e0/comment/674cea222ea96d5b7b5abd7a)

It helped me, so it was good :)