Center all elements on website using CSS and HTML

Question

I'm trying to center all elements on a website.

Here's my CSS file:

body {
    background-image: url('background.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;  
    background-size: cover;
}

.centered{ /* Center entire body */
   width: 800px;
    margin: 0 auto;
}

Here's my HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Training File Upload</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="centered">
        <h1>MusicAI</h1>
        <form method="POST" >
            <span>Choose midi files:</span>
            <input type="file" name="file[]" multiple required/>
            <br>
            <input type="submit" name="submit" value="Upload for training" />
        </form>
        </div>
    </body>
</html>

As of right now the elements on my website are all on the top right. I'm not entirely sure if my centered function is doing anything since the website doesn't change after I refresh it.

Any help would be appreciated!

Divyesh_08 · Accepted Answer · 2021-02-08T05:54:53.083

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {

  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -60%);
 
  
}

<div class="centered">
   <div class="child">
       <h1> MusicAI </h1>
       <form method="POST">
 
             <span> Choose midi files:</span>
   
               <input type = "file" name = "file[]" multiple required/>
            <br>
            <input type="submit" name="submit" value="Upload for training" />
        </form>
    </div>
</div>

score 1 · Answer 2 · answered Feb 08 '21 at 05:42

Try this once

body {
    background-image: url('background.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;  
    background-size: cover;
}

.centered{ /* Center entire body */
   width: 700px;
   text-align: center;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Training File Upload</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="centered">
        <h1>MusicAI</h1>
        <form method="POST" >
            <span>Choose midi files:</span>
            <input type="file" name="file[]" multiple required/>
            <br>
            <input type="submit" name="submit" value="Upload for training" />
        </form>
        </div>
    </body>
</html>

Center all elements on website using CSS and HTML

2 Answers2