Align text horizontally and vertically with CSS inset property

Question

I want to my text to be centered both horizontally and vertically within a div.

I'm using the inset property to fill up the entire div with my p tag.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div class="wrapper">
      <div class="zone">
        <p>Hello World</p>
      </div>
    </div>
  </body>
</html>

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: bordered-box;
}

.wrapper {
  background: red;
}
.zone {
  min-height:10em;
  text-align: center;
  position: relative;
}
.zone p {
  position: absolute;
  inset:0;
}

However I don't get it to work. Can anyone give me a hint on how to achive this with the inset property?

.zone p { position: absolute; inset: 40% 0; } try this – Nisha Jan 27 '23 at 15:19 — Nisha, Jan 27 '23 at 15:19

score 0 · Answer 1 · answered Jan 27 '23 at 15:29

If you require the inset property you can do the following, but there are many better ways to center text in a div.

* {
  margin: 0;
  padding: 0;
  box-sizing: bordered-box;
}

.wrapper {
  background: red;
}
.zone {
  min-height: 10em;
  text-align: center;
  position: relative;
}

.zone p {
  font-size: 20px;
  position: absolute;
  inset: calc(50% - 10px) 0 0 0; /* The minus value needs to be half the font-size */
}

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div class="wrapper">
      <div class="zone">
        <p>Hello World</p>
      </div>
    </div>
  </body>
</html>

Align text horizontally and vertically with CSS inset property

1 Answers1