HTML/CSS trouble aligning content center-CodePudding

I just started learning HTML and CSS none of the fixes google has suggested have managed to align my contact box to the center of the page. I have tried justify-content, align-items, align-content, and display flex in combination with the stuff above. My page either stays the same or the box aligns itself to the upper left.

I have had a lot of trouble with the things I have built in html so far never aligning center. I would just like to understand why this is happening.

<!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" />
    <title>Contact Us</title>
    <link rel="stylesheet" href="./CSS/Style.CSS" />
  </head>
  <body>
    <div >
      <form>
        <!--unsure what HTML validations means but I added required to the name and email fields-->
        <input
          type="text"
          
          placeholder="Full Name"
          required
        />
        <input
          type="text"
          
          placeholder="Your Email"
          required
        />
        <!--puts drop down in form-->
        <select id="Priority">
          <option value="Priority">Message Priority</option>
          <option value="High">High Priority</option>
          <option value="Medium">Medium Priority</option>
          <option value="Low">Low Priority/ non-urgent</option>
        </select>
        <!--I don't understand why the placeholder isn't showing-->
        <textarea
          type="text"
          
          placeholder="Your Message"
        >
        </textarea>
        <!--Makes button-->
        <button type="button" >Send Message</button>
      </form>
    </div>
  </body>
</html>

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: lightpink;
    font-family: sans-serif;
}

/*styles contact box*/
.contact-box{
    width: 500px;
    background-color: antiquewhite;
    box-shadow: 0 0 20px 0 #999;
   /*below here I comment everything out within contact box styling and tried all the center alignment things I could find*/
    top: 50%;
    left: 50%;
    transform: translate(-50%.-50%);
    position: absolute;
}

form{
    margin: 35px;
}

/*styles inputs name, email,etc*/
.input-field{
    width: 400px;
    height: 40px;
    margin-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #777;
    border-radius: 14px;
    outline: none;
}

/*Makes message box bigger*/
.textarea-field{
    height: 150px;
    padding-top: 10px;
}

/*styles send message button*/
.btn{
    border-radius: 20px;
    color: #fff;
    margin-top: 18px;
    padding: 10px;
    background-color: #47c35a;
    font-size: 12px;
    border: none;
    cursor: pointer;
}

/*styles dropdown menu*/
input [type=text], select{
    width: 400px;
    height: 40px;
    margin-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #777;
    border-radius: 14px;
    outline: none;
}

CodePudding user response：

I guess you just have a typo here:

transform: translate(-50%.-50%);

It should look like this:

transform: translate(-50%,-50%);

CodePudding user response：

you just have to put below css in css folder.when you start writting upper left is starting point thats why your content is goin

html { text-align:center }

CodePudding user response：

please replace "margin : 35px" with "padding : 35px" in form class and use below 4 lines in contact-box class to center your form:

top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);

attaching the corrected code for your reference, hope it helps!

<!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" />
    <title>Contact Us</title>
    <style>
        *{
    margin: 0;
    padding: 0;
}

body{
    background-color: lightpink;
    font-family: sans-serif;
}

/*styles contact box*/
.contact-box{
    width: 500px;
    background-color: antiquewhite;
    box-shadow: 0 0 20px 0 #999;
   /*below here I comment everything out within contact box styling and tried all the center alignment things I could find*/
    top: 50%;
    left: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
}

form{
    padding: 35px;
}

/*styles inputs name, email,etc*/
.input-field{
    width: 400px;
    height: 40px;
    margin-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #777;
    border-radius: 14px;
    outline: none;
}

/*Makes message box bigger*/
.textarea-field{
    height: 150px;
    padding-top: 10px;
}

/*styles send message button*/
.btn{
    border-radius: 20px;
    color: #fff;
    margin-top: 18px;
    padding: 10px;
    background-color: #47c35a;
    font-size: 12px;
    border: none;
    cursor: pointer;
}

/*styles dropdown menu*/
input [type=text], select{
    width: 400px;
    height: 40px;
    margin-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #777;
    border-radius: 14px;
    outline: none;
}
    </style>
  </head>
  <body>
    <div >
      <form>
        <!--unsure what HTML validations means but I added required to the name and email fields-->
        <input
          type="text"
          
          placeholder="Full Name"
          required
        />
        <input
          type="text"
          
          placeholder="Your Email"
          required
        />
        <!--puts drop down in form-->
        <select id="Priority">
          <option value="Priority">Message Priority</option>
          <option value="High">High Priority</option>
          <option value="Medium">Medium Priority</option>
          <option value="Low">Low Priority/ non-urgent</option>
        </select>
        <!--I don't understand why the placeholder isn't showing-->
        <textarea
          type="text"
          
          placeholder="Your Message"
        >
        </textarea>
        <!--Makes button-->
        <button type="button" >Send Message</button>
      </form>
    </div>
  </body>
</html>