title: How can I center all my contents in html?
body: <p>I wanted to center all my contents but I do not know how since I am not god in css. I tried to search online and found <code>display: flex;</code> <code>justify-content: center;</code> <code>align-items: center;</code>, but when I tried them it works fine but what I wanted was to center the form under the <code>h1</code> and when I click calculate button the answer will go right below the calculate button. But things do not go right. When I click on calculate button, the answers show up on the right side of the form which is not what I wanted and also I wanted to center the form under the <code>h1</code>.</p>
  <p>This is all my codes:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Determination of Water Flow in a Pipe&lt;/title&gt;
      
      &lt;style&gt;
          body{
              display: flex;
              justify-content: center;
              align-items: center;
          }
      &lt;/style&gt;
  
      &lt;script&gt;
          var mwInput,tInput,dx1,dx2,dy1,dy2,vx1,vx2,vy1,vy2,diameterInput,velocityInput;
          var validationText,densityResult,viscosityResult,nreResult,diameterResult;
          function calculate(){
              mwInput = document.forms[&quot;inputs&quot;][&quot;mwInput&quot;].value;
              tInput = document.forms[&quot;inputs&quot;][&quot;tInput&quot;].value;
              dx1 = document.forms[&quot;inputs&quot;][&quot;dx1&quot;].value;
              dx2 = document.forms[&quot;inputs&quot;][&quot;dx2&quot;].value;
              dy1 = document.forms[&quot;inputs&quot;][&quot;dy1&quot;].value;
              dy2 = document.forms[&quot;inputs&quot;][&quot;dy2&quot;].value;
              vx1 = document.forms[&quot;inputs&quot;][&quot;vx1&quot;].value;
              vx2 = document.forms[&quot;inputs&quot;][&quot;vx2&quot;].value;
              vy1 = document.forms[&quot;inputs&quot;][&quot;vy1&quot;].value;
              vy2 = document.forms[&quot;inputs&quot;][&quot;vy2&quot;].value;
              diameterInput = document.forms[&quot;inputs&quot;][&quot;diameterInput&quot;].value;
              velocityInput = document.forms[&quot;inputs&quot;][&quot;velocityInput&quot;].value;
  
              densityResult = (+dy1 + (+tInput-+dx1) * ((+dy2-+dy1)/(+dx2-+dx1))) * +mwInput;
              viscosityResult = (+vy1 + (+tInput-+vx1) * ((+vy2-+vy1)/(+vx2-+vx1))) * (0.000001);
              diameterResult = +diameterInput * (0.0254);
  
              nreResult = (+diameterResult*+velocityInput*+densityResult)/(+viscosityResult);
  
              document.getElementById(&quot;density&quot;).innerHTML = &quot;ρ = &quot; + densityResult;
              document.getElementById(&quot;viscosity&quot;).innerHTML = &quot;μ = &quot; + viscosityResult;
              document.getElementById(&quot;diameter&quot;).innerHTML = &quot;D = &quot; + diameterResult;
              document.getElementById(&quot;velocity&quot;).innerHTML = &quot;V = &quot; + velocityInput;
              document.getElementById(&quot;nre&quot;).innerHTML = &quot;Nre = &quot; + nreResult;
          }
      &lt;/script&gt;
      
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;form name = &quot;inputs&quot; action=&quot;javascript:calculate();&quot; &gt;
          &lt;h1&gt;Determination of Water Flow in a Pipe&lt;/h1&gt;
          &lt;span&gt;MW of Substance: &lt;/span&gt; 
          &lt;input type=&quot;text&quot; style=&quot;width: 100px;&quot; name = &quot;mwInput&quot;&gt;&lt;br&gt;&lt;br&gt;
          &lt;span&gt;Enter value of T: &lt;/span&gt; 
          &lt;input type=&quot;text&quot; style=&quot;width: 100px;&quot; name= &quot;tInput&quot;&gt;&lt;br&gt;&lt;br&gt;
          &lt;span&gt;Density&lt;/span&gt;&lt;br&gt;
          &lt;span&gt;X&lt;/span&gt;
          &lt;span id=&quot;dy&quot;&gt;Y&lt;/span&gt;&lt;br&gt;
          &lt;input type=&quot;text&quot; style=&quot;width: 100px;&quot; name = &quot;dx1&quot;&gt;
          &lt;input type=&quot;text&quot; style=&quot;width: 100px;&quot; name = &quot;dy1&quot;&gt;&lt;br&gt;
          &lt;input type=&quot;text&quot; style=&quot;width: 100px;&quot; name = &quot;dx2&quot;&gt;
          &lt;input type=&quot;text&quot; style=&quot;width: 100px;&quot; name = &quot;dy2&quot;&gt;&lt;br&gt;&lt;br&gt;
          &lt;span&gt;Viscosity&lt;/span&gt;&lt;br&gt;
          &lt;span class=&quot;vx&quot;&gt;X&lt;/span&gt;
          &lt;span&gt;Y&lt;/span&gt;&lt;br&gt;
          &lt;input type=&quot;text&quot; style=&quot;width: 100px;&quot; name = &quot;vx1&quot;&gt;
          &lt;input type=&quot;text&quot; style=&quot;width: 100px;&quot; name = &quot;vy1&quot;&gt;&lt;br&gt;
          &lt;input type=&quot;text&quot; style=&quot;width: 100px;&quot; name = &quot;vx2&quot;&gt;
          &lt;input type=&quot;text&quot; style=&quot;width: 100px;&quot; name = &quot;vy2&quot;&gt;&lt;br&gt;&lt;br&gt;
          &lt;span&gt;Inside diameter: &lt;/span&gt;
          &lt;input type=&quot;text&quot; style=&quot;width: 100px;&quot; name = &quot;diameterInput&quot;&gt;&lt;br&gt;&lt;br&gt;
          &lt;span&gt;Velocity: &lt;/span&gt;
          &lt;input type=&quot;text&quot; style=&quot;width: 100px;&quot; name = &quot;velocityInput&quot;&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;input type=&quot;submit&quot; value=&quot;Calculate&quot;&gt;
      &lt;/form&gt;
  
      &lt;p id = &quot;validation&quot;&gt;
      &lt;p id = &quot;density&quot;&gt;&lt;/p&gt;
      &lt;p id = &quot;viscosity&quot;&gt;&lt;/p&gt;
      &lt;p id = &quot;diameter&quot;&gt;
      &lt;p id = &quot;velocity&quot;&gt;
      &lt;p id = &quot;nre&quot;&gt;&lt;/p&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt; 
  </code></pre>