How to center a p element in the screen without a body or html element and create a black background

Question

What I want to do is to use 0 and make this code have a black background that covers the whole screen and center the text in it. I want it to not have a body element or an html element as I just want the  element.

I tried using box-shadows and the transform property in the style attribute.

<p onclick='this.innerHTML++' style='color: white; width: 100vw; height: 100vh; transform: translate(-50vw, -50vh); box-shadow: 50vw 50vh black;'>0</p>

That just displayed a quarter of the viewport a fourth of whiteness which meant the box-shadow wasn't working. I found it added a margin, so I removed it. It still didn't work. It centered the text though. I know how to do it with 2 elements, but I want to keep the code with only the  element.

This time I tried using the background property.

<p onclick='this.innerHTML++' style='color: white; width: 100vw; height: 100vh; background: black; text-align: center'>0</p>

This time the code did everything correctly except positioning the text vertically centered.

Is it possible to do this all in 1 element, center the text both horizontally and vertically, and display a black background that covers the whole screen?

You can easily get the text centered using `display:flex` and `justify-content` / `align-items`. You can not have a "naked" `p` element floating around in nothing though - even if you do not provide `html` and `body` in your code, the browser will automatically create them when building the DOM. And it will apply a default margin to body from the user stylesheet, usually 8px. So if you leave the p element in normal flow, you will have to compensate for that as well. — CBroe, Jan 17 '23 at 07:21

cloned · Accepted Answer · 2023-01-17T07:33:54.727

0

To center content you can either use flex or grid:

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

or with grid, it's just two lines:

    display: grid;
    place-content: center;

I created a snippet for you. I changed your  tag to a button, since this would be more semantic valid HTML. You can of course use any element you like.

button {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  place-content: center;
  font-size: 3rem;
  color: #fff;
  background-color: rebeccapurple;
  
}

<button onclick="this.innerHTML++" type="button">0</button>

edited Jan 17 '23 at 07:33

answered Jan 17 '23 at 07:22

cloned

6,346
4
26
38

I wanted a `
` element without the use of the `
` element. – horsey_guy Jan 17 '23 at 07:23
Wait, just without the body styles I meant to say. – horsey_guy Jan 17 '23 at 07:26
You can't remove the `` It will be always added by the browser, even if you don't add it. And it will always have the default styles added to it. If you then use a non semantic `
` or a semantic `
– cloned Jan 17 '23 at 07:32
I know, it's just the source code without the `` element. – horsey_guy Jan 17 '23 at 07:38
updated the snippet to not use body-styling anymore. – cloned Jan 17 '23 at 07:42
oh, btw `inset: 0;` instead of `left: 0; top: 0; right: 0; bottom: 0;` – horsey_guy Jan 17 '23 at 07:44
I think I can settle with `
0
` – horsey_guy Jan 17 '23 at 07:47
you are correct, `inset: 0` is much shorter and better in this case. :) I will leave it in the answer, so the comments down here make sense. – cloned Jan 17 '23 at 07:48

How to center a p element in the screen without a body or html element and create a black background

1 Answers1