How do I create a container which sits directly in the middle of the page and zooms

Question

I am currently working on a small little personal project which is just a simple page which displays the total amount of COVID-19 cases. I am quite new to HTML and CSS and was just wondering what the best way is to put these items in a container and directly centre them both horizontally and vertically. I have looked around quite a bit and have been unable to find what I am looking for. This is the current code that I am using

<body>
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>

<div id="display"></div>

<script type="text/javascript">
  $.ajax({
    url: 'https://api.thevirustracker.com/free-api?global=stats',
    dataType: 'json',
    success: function(data) {
      document.getElementById('display').textContent = data.results[0].total_cases.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    }
  });
</script>

I know that I am going to want to put the div container tags around the start and end of the script command. Any help would be greatly appreciated.

Harkal · Accepted Answer · 2020-04-18T09:41:39.197

-1

enjoy

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div style=" 
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;">
    <div id="display"></div>
</div>

<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script type="text/javascript">
  $.ajax({
    url: 'https://api.thevirustracker.com/free-api?global=stats',
    dataType: 'json',
    success: function(data) {
      document.getElementById('display').textContent = data.results[0].total_cases.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    }
  });
</script> 
</body>
</html>

try this code now [EDIT]

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div style=" 
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;">
    <div>
    Total Confirmed
    </div>
    <div id="display"></div>
</div>

<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script type="text/javascript">
  $.ajax({
    url: 'https://api.thevirustracker.com/free-api?global=stats',
    dataType: 'json',
    success: function(data) {
      document.getElementById('display').textContent = data.results[0].total_cases.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    }
  });
</script> 
</body>
</html>

edited Apr 18 '20 at 09:41

answered Apr 18 '20 at 08:30

Harkal

1,770
12
28

What would be the code required to make it so that way I could have a small bit of text above the number received from the API while still keeping them both aligned? I tried padding and padding-top but I haven't found a solution; would it be something to do with containers? – Green Apr 18 '20 at 09:12
i didnt understand what you mean show me what you want – Harkal Apr 18 '20 at 09:17
That javascript code outputs the current amount of confirmed COVID cases received from the API link. I wanted to put some text above that number which says something along the lines of "Total Confirmed Cases", I have managed to do it by changing the height percentage however it doesn't scale with the number when I zoom in and out. – Green Apr 18 '20 at 09:22
what does zoom in zoom out means ? browser zomming ? – Harkal Apr 18 '20 at 09:25
ok i got it what you want. can you show me the current code you are using. moreover this link says = `Uploads are disabled. File uploads require push access to this repository.` – Harkal Apr 18 '20 at 09:33
Sorry my bad I sent the link before uploading. https://github.com/GreenishUwU/covid-tracker-personal-site I copied the same CSS that you used for the counter for the text but just changed the height percentage so it wouldn't be on top of the number/counter however when I zoom they both end up getting big and overlapping eachother. I am assuming that I have to put them together in the same container or something. Thanks so much for the help so far :) – Green Apr 18 '20 at 09:36
i can't see any `Total Confirmed` in the code. leme give you my code with `Total Confirmed`. try running it – Harkal Apr 18 '20 at 09:37
On the first line of body I have it in the tags which are then defined in the style.css file to have the same attributes as the code that you gave me except for more stuff for the text and a different height. Would you have discord? I think it may be more convenient for us to chat there. – Green Apr 18 '20 at 09:40
try the edited code brother – Harkal Apr 18 '20 at 09:41

How do I create a container which sits directly in the middle of the page and zooms

1 Answers1