0

Image of my Form

I'd like to move this form to the middle of my web page. I have it center aligned currently, but it is at the top of my webpage. I want it smack dab in the middle. I've been trying to google around but this has been a surprisingly difficult answer to find.

html

<body>
    <div class="form">
        <form action="./script.js" method="post">
            <ul>
                <li>
                    <label for="date">Date:</label>
                    <input type="date" id="date" name="date" step="0.1" min="0" 
                        placeholder="What's the date today?" size="50">
                </li>
                <li>
                    <label for="mileage">Mileage:</label>
                    <input type="number" id="mileage" name="mileage" step="0.1" min="0" 
                        placeholder="How many miles today?" size="50">
                </li>
                <li>
                    <label for="note">Notes:</label>
                    <textarea id="note" name="user_message" placeholder="How did the run feel?"></textarea>
                </li>
                <li class="button">
                    <button type="submit">Submit</button>
                </li>
            </ul>
        </form>
    </div>
</body>
</html>

CSS

div.form {
    display: block;
    text-align: center;
}

form {
    margin: 0 auto;
    width: 600px;
    padding: 1em;
    border: 1px solid lightgrey;
    border-radius: 1em;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

form li+li {
    margin-top: 1em;
}
Jordan Mitchell
  • 11
  • 3

3 Answers3

1

This should work:

div.form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

form {
    margin: 0 auto;
    width: 600px;
    padding: 1em;
    border: 1px solid lightgrey;
    border-radius: 1em;
    text-align: left;
}

form li+li {
    margin-top: 1em;
}
<body>
    <div class="form">
        <form action="./script.js" method="post">
            <ul>
                <li>
                    <label for="date">Date:</label>
                    <input type="date" id="date" name="date" step="0.1" min="0" 
                        placeholder="What's the date today?" size="50">
                </li>
                <li>
                    <label for="mileage">Mileage:</label>
                    <input type="number" id="mileage" name="mileage" step="0.1" min="0" 
                        placeholder="How many miles today?" size="50">
                </li>
                <li>
                    <label for="note">Notes:</label>
                    <textarea id="note" name="user_message" placeholder="How did the run feel?"></textarea>
                </li>
                <li class="button">
                    <button type="submit">Submit</button>
                </li>
            </ul>
        </form>
    </div>
</body>
</html>
anton-tchekov
  • 1,028
  • 8
  • 20
  • Easier ways to do this now with modern CSS - although this works – Mark Schultheiss Dec 02 '22 at 22:52
  • 1
    this is a really bad answer. avoid absolute positioning unless it's really required. absolute positioning takes the element out of the flow of the dom. applied here it leads to problems when scaling – DCR Dec 02 '22 at 23:32
  • @DCR You can always put a `position: relative;` wrapper div around it and it will stay inside the DOM. In this particular case it does not make a difference since it is just one form and nothing else on the page. – anton-tchekov Dec 02 '22 at 23:38
  • I hear you but I've seen more problems with using absolute positioning. When it's really needed it's fine but when used because it works when there are alternatives just seems to be a bad way of doing things. – DCR Dec 03 '22 at 01:39
-1

Super easy, give your container all the view height and then super center it with grid.

I forced your form to half of the view width just to show it was centered.

.form-container {
  height: 100vh;
  display: grid;
  place-items: center;
}

/* this is just style */
form {
  margin: 0 auto;
  width: 50vw;
  padding: 1em;
  border: 1px solid lightgrey;
  border-radius: 1em;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

form li+li {
  margin-top: 1em;
}
<div class="form form-container">
  <form action="./script.js" method="post">
    <ul>
      <li>
        <label for="date">Date:</label>
        <input type="date" id="date" name="date" step="0.1" min="0" placeholder="What's the date today?" size="50">
      </li>
      <li>
        <label for="mileage">Mileage:</label>
        <input type="number" id="mileage" name="mileage" step="0.1" min="0" placeholder="How many miles today?" size="50">
      </li>
      <li>
        <label for="note">Notes:</label>
        <textarea id="note" name="user_message" placeholder="How did the run feel?"></textarea>
      </li>
      <li class="button">
        <button type="submit">Submit</button>
      </li>
    </ul>
  </form>
</div>
Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100
-1

form {
    margin: 0 auto;
    width: 600px;
    padding: 1em;
    border: 1px solid lightgrey;
    border-radius: 1em;
    
    text-align: left;
}

form li+li {
    margin-top: 1em;
}

.form{
display:flex;
height:calc(100vh - 2px);
justify-content:center;
align-items:center;
border:solid 1px red;}

body,html,div{
margin:0;
padding:0;}
<body>
    <div class="form">
        <form action="./script.js" method="post">
            <ul>
                <li>
                    <label for="date">Date:</label>
                    <input type="date" id="date" name="date" step="0.1" min="0" 
                        placeholder="What's the date today?" size="50">
                </li>
                <li>
                    <label for="mileage">Mileage:</label>
                    <input type="number" id="mileage" name="mileage" step="0.1" min="0" 
                        placeholder="How many miles today?" size="50">
                </li>
                <li>
                    <label for="note">Notes:</label>
                    <textarea id="note" name="user_message" placeholder="How did the run feel?"></textarea>
                </li>
                <li class="button">
                    <button type="submit">Submit</button>
                </li>
            </ul>
        </form>
    </div>
</body>
DCR
  • 14,737
  • 12
  • 52
  • 115