Lab 4 - Centering

In this lab, you will work on centering content on a webpage.

1. Center an element horizontally

  1. Make a page with only 1 element inside body: main
  2. put 1 element only inside main: img
  3. use a square image (perhaps from https://picsum.photos or if you’re ready for the challenge, add some image of your own/ stolen from the web and test your ability to publish this code to github pages), restricted to 10rem in size
  4. without using flexbox or css-grid, write CSS rules to center the image horizontally in the page

2. Center an element vertically

  1. Duplicate the directory containing your code for the previous part (we’d like to keep it as a reference/example)
  2. update the style rules to also center the img vertically (you may use flexbox for this part)