Layout: Center

The center layout is used to create a vertical stripe of content inside a given container. Apollo uses the technique on <main>.

The following example illustrates how the center layout works on a smaller scale, but the principle is the same:

• A center layout is contained within a box layout (without a border or padding), purely to help with this example.
• Auto left and right margins are applied to the center layout, along with some left and right padding and a maximum width.
• The padding maintains a space between the contents of the center layout and its parent container, even when that container is smaller than the maximum width set on the center layout.
• The center layout uses an exception to our global box-sizing: border-box; declaration. It uses box-sizing: content-box; to prevent the padding from making the content narrower than intended.