Can't Print Page Numbers on HTML Pages?

Problem Description:

Despite researching extensively, page numbers fail to appear when printing an HTML document.

CSS Code Used:

@page {
  margin: 10%;
  @top-center {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 2em;
    content: counter(page);
  }
}

The @page rule was attempted both inside and outside the @media all block to no avail.

Solution:

Due to the limitations of web browsers, implementing page numbers using @page is not feasible. An alternative solution is provided by Oliver Kohll, which utilizes table-based formatting in CSS without relying on @page:

CSS:

#content {
    display: table;
}

#pageFooter {
    display: table-footer-group;
}

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}

HTML:

Customization:
The appearance of the page numbers can be customized by modifying the properties of #pageFooter, such as text formatting, positioning, and background styling.