Text is not being centered - html

Question

I want to center all the text in BodyAbout.js. Text-align isn't working nor is padding-left of left. I'm not repeating the class name and thats I can think is reason its not working.
function BodyAbout() {
return (
<div className='Body__About'>
<div className='Body__Header'>
<h2>About</h2>
</div>
<div className='Body__Paragraph'>
<p>Founded in 2010, we are a creative agency that</p>
<p>produces lasting results for our clients. We’ve</p>
<p>partnered with many startups, corporations, and</p>
<p>nonprofits alike to craft designs that make real</p>
<p>impact. We’re always looking forward to creating</p>
<p>brands, products, and digital experiences that</p>
<p>connect with our clients' audiences.</p>
</div>
</div>
BodyAbout CSS
.Body__About {
background-color: #e7816b;
height: 30em;
text-align: center;
}
BodyAbout is the component
function About() {
return (
<div>
<Navbar />
<AboutUsImage />
<BodyAbout/>
<WorldClassImg />
<MidPageDescAboutDesign Title='World-class talent'/>
<LandmarkImages Circle='/images/bg-pattern-small-circle.svg'/>
<RealDeal />
<MidPageDescAboutDesign Title='The real deal'/>
<AboveFooter />
<Footer />
</div>
)
}

Answer 1

text-align will only center the element's inline contents, it does not center the element itself.
If it is a block element (a div), you need to set margin: 0 auto;
What it does
The margin: 0 auto; will set top and bottom margin to 0 and left and right margin to auto, this will automatically put the elements content in the center. This only works if the block element in question has a known width (fixed or relative), otherwise it may not work.
If it is an inline-element, set text-align: center; on its parent element instead.
Alternatively you could just target the elements children in css, something like this may work:
.Body__About .Body__Paragraph p{
text-align: center;
}
You may not need the p tag but I included it just in case, that will center align all the p elements inside Body_Paragraph

Answer 2

p is commonly a block-level element and may have text-align: left assigned to it from another CSS. Try:
.Body__About {
background-color: #e7816b;
height: 30em;
}
.Body__Paragraph p {
text-align: center;
}

Answer 3

Try these
.Body__About {
display: flex;
justify-content:center;
}

Answer 4

Try adding these three style properties to the container
.Body__About{
display: flex;
align-items: center;
flex-direction: column;
}

Answer 5

For vertical and horizontal alignment, please use the below code
.Body__About {
display: flex;
align-items: center;
justify-content: center;
}