How to make text in the center of a background

HTML-CSS
1

Hello everyone, I have a question regarding my personal portfolio project. I want to have my text to always be in the middle of the circle in my background. Can anybody give me a solution to this? Here is the codepen link:
https://codepen.io/bluesky21800/pen/abmYEme
All help and response are appreciated! :smiley:

2

Try giving padding and margin.

3

Flexbox to the rescue…

display: flex;
justify-content: center;
align-items: center;

/* Depending on what you need*/
flex-direction: column;
1 Like
4

It doesn’t work hmm… Sorry, my question might not be that clear. If you see on my page, the text is a bit on top of the page. I want it to be responsive and always be in the middle of the viewport where the center of the circle of the background is, regardless if you use mobile or laptop or computer.

5

Somehow if i use #welcome-section h1{margin-top: 100px;} it pushes my whole welcome-section + the background down

6

use padding and see @Bluesky21800,

7

Thank you, it is starting to work. May I ask two more questions, Why does padding work here but not margin? Also my p elements somehow gets the effects of the padding too… how can i get rid of it?

8

Then nest the p element inside its own div

Change the padding into margin.

9

@Bluesky21800, a good search term for this would be something like “easily center anything in its parent container”.
This gives a few results. The second one, from FCC, gives the answer you’re looking for.

1 Like
10