Form on the center of the page with CSS

Hey everyone! I have the below HTML but the exercise is align using the CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Registration Form</title>
  </head>
  <body>
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
    <form>
      <fieldset>
        <label for="first-name"
          >Enter Your First Name:
          <input id="first-name" name="first-name" type="text" required
        /></label>
        <label for="last-name"
          >Enter Your Last Name:
          <input id="last-name" name="last-name" type="text" required
        /></label>
        <label for="email"
          >Enter Your Email:
          <input id="email" name="email" type="email" required
        /></label>
        <label for="new-password"
          >Create a New Password:
          <input
            id="new-password"
            name="new-password"
            type="password"
            pattern="[a-z0-5]{8,}"
            required
        /></label>
      </fieldset>
      <fieldset>
        <label for="personal-account"
          ><input
            id="personal-account"
            type="radio"
            name="account-type"
            class="inline"
          />
          Personal Account</label
        >
        <label for="business-account"
          ><input
            id="business-account"
            type="radio"
            name="account-type"
            class="inline"
          />
          Business Account</label
        >
        <label for="terms-and-conditions">
          <input
            id="terms-and-conditions"
            type="checkbox"
            required
            name="terms-and-conditions"
            class="inline"
          />
          I accept the
          <a href="https://www.freecodecamp.org/news/terms-of-service/"
            >terms and conditions</a
          >
        </label>
      </fieldset>
      <fieldset>
        <label for="profile-picture"
          >Upload a profile picture:
          <input id="profile-picture" type="file" name="file"
        /></label>
        <label for="age"
          >Input your age (years):
          <input id="age" type="number" name="age" min="13" max="120"
        /></label>
        <label for="referrer"
          >How did you hear about us?
          <select id="referrer" name="referrer">
            <option value="">(select one)</option>
            <option value="1">freeCodeCamp News</option>
            <option value="2">freeCodeCamp YouTube Channel</option>
            <option value="3">freeCodeCamp Forum</option>
            <option value="4">Other</option>
          </select>
        </label>
        <label for="bio"
          >Provide a bio:
          <textarea
            id="bio"
            name="bio"
            rows="3"
            cols="30"
            placeholder="I like coding on the beach..."
          ></textarea>
        </label>
      </fieldset>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

This is what I have so far in CSS, I tried different things and seems not is working so clearly I]m struggling with CSS and getting lost in documents, I know should be something like a border-box but does not work or maybe I´m adding to the wrong place. I was already able to align the elements with flex-direction but was pretty much it

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
  font-family: Tahoma, Helvetica, sans-serif;
  font-size: 16px;
  box-sizing: border-box;
  margin: 20px 10px 15px 30px;
  position: absolute;
}

input fieldset {
  width: auto;
  padding: 10px 20px;
}

form {
  max-width: 500px;
  min-width: 300px;
  display: table;
}

fieldset {
  border-bottom: 3px solid #3b3b4f;
  display: table-column;
  flex-direction: column;
}

html:~

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Registration Form</title>
  </head>
  <body>
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
    <form>
      <fieldset>
        <label for="first-name"
          >Enter Your First Name:
          <input id="first-name" name="first-name" type="text" required
        /></label>
        <label for="last-name"
          >Enter Your Last Name:
          <input id="last-name" name="last-name" type="text" required
        /></label>
        <label for="email"
          >Enter Your Email:
          <input id="email" name="email" type="email" required
        /></label>
        <label for="new-password"
          >Create a New Password:
          <input
            id="new-password"
            name="new-password"
            type="password"
            pattern="[a-z0-5]{8,}"
            required
        /></label>
      </fieldset>
      <fieldset>
        <label for="personal-account"
          ><input
            id="personal-account"
            type="radio"
            name="account-type"
            class="inline"
          />
          Personal Account</label
        >
        <label for="business-account"
          ><input
            id="business-account"
            type="radio"
            name="account-type"
            class="inline"
          />
          Business Account</label
        >
        <label for="terms-and-conditions">
          <input
            id="terms-and-conditions"
            type="checkbox"
            required
            name="terms-and-conditions"
            class="inline"
          />
          I accept the
          <a href="https://www.freecodecamp.org/news/terms-of-service/"
            >terms and conditions</a
          >
        </label>
      </fieldset>
      <fieldset>
        <label for="profile-picture"
          >Upload a profile picture:
          <input id="profile-picture" type="file" name="file"
        /></label>
        <label for="age"
          >Input your age (years):
          <input id="age" type="number" name="age" min="13" max="120"
        /></label>
        <label for="referrer"
          >How did you hear about us?
          <select id="referrer" name="referrer">
            <option value="">(select one)</option>
            <option value="1">freeCodeCamp News</option>
            <option value="2">freeCodeCamp YouTube Channel</option>
            <option value="3">freeCodeCamp Forum</option>
            <option value="4">Other</option>
          </select>
        </label>
        <label for="bio"
          >Provide a bio:
          <textarea
            id="bio"
            name="bio"
            rows="3"
            cols="30"
            placeholder="I like coding on the beach..."
          ></textarea>
        </label>
      </fieldset>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>


this should be the final outcome by updating the css only which I´m struggling with

you should not copy the demo provided, create your own personal project


I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

like this?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Registration Form</title>
  </head>
  <body>
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
    <form>
      <fieldset>
        <label for="first-name"
          >Enter Your First Name:
          <input id="first-name" name="first-name" type="text" required
        /></label>
        <label for="last-name"
          >Enter Your Last Name:
          <input id="last-name" name="last-name" type="text" required
        /></label>
        <label for="email"
          >Enter Your Email:
          <input id="email" name="email" type="email" required
        /></label>
        <label for="new-password"
          >Create a New Password:
          <input
            id="new-password"
            name="new-password"
            type="password"
            pattern="[a-z0-5]{8,}"
            required
        /></label>
      </fieldset>
      <fieldset>
        <label for="personal-account"
          ><input
            id="personal-account"
            type="radio"
            name="account-type"
            class="inline"
          />
          Personal Account</label
        >
        <label for="business-account"
          ><input
            id="business-account"
            type="radio"
            name="account-type"
            class="inline"
          />
          Business Account</label
        >
        <label for="terms-and-conditions">
          <input
            id="terms-and-conditions"
            type="checkbox"
            required
            name="terms-and-conditions"
            class="inline"
          />
          I accept the
          <a href="https://www.freecodecamp.org/news/terms-of-service/"
            >terms and conditions</a
          >
        </label>
      </fieldset>
      <fieldset>
        <label for="profile-picture"
          >Upload a profile picture:
          <input id="profile-picture" type="file" name="file"
        /></label>
        <label for="age"
          >Input your age (years):
          <input id="age" type="number" name="age" min="13" max="120"
        /></label>
        <label for="referrer"
          >How did you hear about us?
          <select id="referrer" name="referrer">
            <option value="">(select one)</option>
            <option value="1">freeCodeCamp News</option>
            <option value="2">freeCodeCamp YouTube Channel</option>
            <option value="3">freeCodeCamp Forum</option>
            <option value="4">Other</option>
          </select>
        </label>
        <label for="bio"
          >Provide a bio:
          <textarea
            id="bio"
            name="bio"
            rows="3"
            cols="30"
            placeholder="I like coding on the beach..."
          ></textarea>
        </label>
      </fieldset>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

You need to have your href value styles.css

You don’t have any CSS that is centering any element.

Center text using text-align: center

Center element with a width using an auto margin.

Center elements inside a container by using grid or flexbox with the justify/align properties (or place content/items when using grid).


As an aside, it is very unlikely you want position: absolute on the body element.