The CSS for this block has text-align set to center.
It looks like that might be centering this block. But it's not.

When the block is given borders, you can see it's only centering the content within the block.
Indeed, the CSS property is named text-align. It's not meant for aligning the blocks themselves.

This block is centered by giving it equal left/right margins that are quite large.
Blocks expand horizontally as much as possible, but that expansion is limited by a block's margins.
That means the width of the block is determined by the browser window width, minus the left/right margins.

In many cases, it's desirable to specify the block's width in the CSS and also center it. In that case, you can't determine how big the left/right margins should be since you don't know how wide the browser window will be.

The solution is to set the left/right margin to the value of auto in the CSS. The browser automatically calculates the left and right margins to be equal, thereby centering the block.

Resize the browser window (try it) and the margins are automatically recalculated to keep it centered.
The first centered block above stays centered because the browser changes the block width based on the width of the browser window.

There is no easy way to vertically center content inside blocks using CSS. In most cases, you don't even need to since vertical space is in Web pages is usually content driven.

There are few CSS tricks you can use to vertically center content, but that's beyond the scope of this lesson. But you can simulate vertical centering by adding line breaks before and after the block content like in this block