Center container in html-CodePudding

Does anyone know how to center my container to be center. I try to align my code to be center but it doesn't apply the code. I try to change it but it doesnt work. Do I miss something? It show like this.

I want it to be center but it doesnt work. Here is my html code.

 <div  style="margin-top: 50px; margin-bottom: 50px;">
     <%- include ("includes/ResponseAlert", {
         "request": request
     }) %>
 
     <div >
         <div >
             <h1>My Uploads</h1>
         </div>
 
         <div >
             <a href="javascript:void(0);"  onclick="selectFileForUpload();">Upload</a>
         </div>
     </div>
     </div>
 
     <div >
         <%
             uploaded.forEach(function (singleFile) {
         %>
             <div  style="margin-top: 30px;">
 
                <div  style="font-size: 100px; text-align: center; height: 100px;">
                    <div >
                    </div>
   
                    <div >
                        <div >
                            <div >

CodePudding user response：

Update:

I edited your code to a static html to test it out.

I can see that your code is working, but you can try to add text-align: center; in order to make everything in the container centered.

Below is the full code, and you can test it here too: https://codesandbox.io/s/festive-hopper-73v528?file=/index.html

and here's a live preview: https://73v528.csb.app/

<div
  
  style="margin-top: 50px; margin-bottom: 50px; text-align: center;"
>
  <div >
    <div >
      <h1>My Uploads</h1>
    </div>

    <div >
      <a
        href="javascript:void(0);"
        
        onclick="selectFileForUpload();"
        >Upload</a
      >
    </div>
  </div>

  <div >
    <div  style="margin-top: 30px;">
      <div
        
        style="font-size: 100px; text-align: center; height: 100px;"
      >
        <div ></div>

        <div >
          <div >
            <div >
              <p>chap5</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

You have applied text-center property on body, but according to screenshot data is on footer

             <div  style="font-size: 100px; text-align: center; height: 100px;">
                 <div >
                 </div>

                 <div >
                     <div >
                         <div >

instead apply style on <div > check the snippet above