How to center a form in the middle of the page

Question

I have a simple form and I just need it centered in the middle of the page. Like, directly square in the middle. But no matter what I change in my CSS file it stays on the left side of the page.

My HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Search</title>
    </head>
    <link rel="stylesheet" href="search.css" type="text/css">
    <body>

        <div>
            <form action="https://google.com/search">
                <input id="search" type="text" name="q">
                <br>
                <input id="button" type="submit" value="Google Search">
            </form>
        </div>

       
    </body>
</html>

For example `form { width: 250px; margin: 0 auto; }` will give the form a width and center it horizontaly in the middle. — bron, Jul 13 '21 at 18:29

score 0 · Accepted Answer · answered Jul 13 '21 at 18:26

You can make use of flexbox's align-items property:

body{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Search</title>
    </head>
    <link rel="stylesheet" href="search.css" type="text/css">
    <body>

        <div>
            <form action="https://google.com/search">
                <input id="search" type="text" name="q">
                <br>
                <input id="button" type="submit" value="Google Search">
            </form>
        </div>

       
    </body>
</html>

How to center a form in the middle of the page

1 Answers1