How can I move text to the very middle (y axis)

Question

I'm trying to center the text in the very middle. I use style="text-align: center;for the x-axis and it works good.

How can I make the text in the middle of the page on both axes instead of just the x axis?

You can use flex or grid layouts to vertically align without magic numbers. You could also use js to calculate the height and adjust values. A large issue with vertical alignment is the container needs to understand what it's height is. If you want it to be take up the whole screen, my favorite solution is using `position: absolute;` and `inset: 0;` for the container to establish a size for the container — async await, Aug 30 '22 at 22:12
Ok, so I tried doing that, and I also forgot to mention that this is in a paragraph, not a div. I tried this and it barely had an effect : — madman12, Aug 30 '22 at 22:15
You'll need to post your HTML for more concrete help, centering depends on the size of the parent element. The flagged duplicate covers the options, with flex and grid being the most modern and robust options. (`position: absolute` as a sizing solution requires a relevant `position: relative` parent element unless you want to drag it out of the flow completely) — pilchard, Aug 30 '22 at 22:17

score 1 · Answer 1 · answered Aug 30 '22 at 22:24

You can use flex on your css.

body {
  display: flex;
  justify-content: center;
  height: 100vh; /* this height will match your height screen */
  align-items: center;
}

or with inline css on your body

<body style="display: flex; justify-content: center; height: 100vh; align-items: center;"></body>

1 Answers1