The center layout is used to create a vertical stripe of content inside a given container. Apollo uses the technique on
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.
Center in action