CSS @top-center At-Rule
The @top-center at-rule defines a margin box centered along the top edge of a printed page. It is nested within @page and can show document titles or running information.
@top-center Syntax
@page {
margin: 20mm;
@top-center {
content: "Website Report";
font-size: 10pt;
}
}The example demonstrates the syntax and the relationship between the rule and its surrounding CSS. Check the details below before using it in a production document.
How @top-center Works
This rule is part of the CSS paged-media model. It is evaluated when the browser formats content for printing or PDF output.
The @top-center at-rule defines a margin box centered along the top edge of a printed page. It is nested within @page and can show document titles or running information.
The @top-center margin box is centered across the top page margin of printed pages. It is often used for running document titles or page information.
Position on the Page
The top-center box occupies the central portion of the top page margin. It does not appear on the normal screen display.
Place it inside @page and generate its text with content. The printed result is affected by the page size, margins, and other top margin boxes.
Page Numbers
Use content: "Page " counter(page); to display the current page number in the margin box.
First-Page Overrides
A more specific @page :first rule can replace or suppress a top-center header on the first printed page.
@top-center Example
This example illustrates the rule in context. Open Print Preview to see the margin-box content.
HTML
<h1>Print Example</h1>
<p>Open your browser print preview to inspect the page margins.</p>CSS
@page {
margin: 20mm;
@top-center {
content: "Website Report";
font-size: 10pt;
}
}Browser Support
Support varies by feature and browser version. For current compatibility, consult Can I Use? and search for the relevant feature. Print margin boxes also depend on print and PDF behavior.
The box does not appear in the normal webpage layout. Test with realistic document lengths and page breaks.
Specifications
This feature is described in CSS Paged Media Module Level 3.