CSS @bottom-center At-Rule
The @bottom-center at-rule defines a page-margin box centered along the bottom margin of a printed page. It is nested inside the @page at-rule and can display generated content such as page numbers, document titles, or other footer information.
@bottom-center Syntax
@page {
@bottom-center {
content: value;
}
}The @bottom-center at-rule is a page-margin at-rule and must be nested inside an @page rule. Its block contains page-margin property declarations that control the content and appearance of the bottom-center margin box.
How @bottom-center Works
When a document is formatted for paged media, the page box includes margin areas surrounding the page content. The @bottom-center at-rule targets the margin box centered along the bottom edge of the page.
The box occupies the bottom page margin between the @bottom-left and @bottom-right margin boxes. Its width can vary according to the available space and the other bottom margin boxes.
Generated Content
The content property determines what appears in the bottom-center margin box. Static text can be displayed, or CSS counters can be used to generate information such as the current page number.
@page {
@bottom-center {
content: "Page " counter(page);
}
}The built-in page counter represents the current page number, making the bottom-center margin box a common location for numbered page footers.
Page-Margin Box
The @bottom-center margin box can use page-margin properties to control its presentation. These include properties for backgrounds, borders, color, fonts, margins, padding, text alignment, vertical alignment, width, height, and other supported page-margin formatting.
The margin box exists within the bottom margin of the page rather than inside the document's normal content area. The page must therefore provide enough bottom margin space for the generated content to be displayed appropriately.
@bottom-center Example
The following example adds the current page number to the bottom center of each printed page.
@page {
margin: 1in;
@bottom-center {
content: "Page " counter(page);
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
}
}When the document is printed or displayed in a paged-media environment that supports page-margin boxes, each page can display its page number in the bottom-center margin area.
Specifications
The @bottom-center at-rule is defined as a page-margin at-rule in the CSS Paged Media Module Level 3 specification.