Update display style of built-in themes container

[yhatt]

Closes #372.

The default slide container is now the block element.

Modern browsers can be centering child elements by using align-content: center. This change will reduce confusion about properties that are incompatible with Flexbox, such as float: right, columns: 2, and so on.

Breaking change

Safe centering

In this update, we have also adopted "safe centering", that may break the layout of slides for existing presentations. https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#safe

section {
  /* Marp Core v4 adopts safe centering by default */
  align-content: safe center;
}

Behavior

Let’s consider a scenario that the slide content will overflow beyond the padding of the slide container.

Until Marp Core v3, the content is always vertically centered. If the slide has a lot of content, it will overflow from both the top and bottom of the slide container.

In Marp Core v4 and later, the content no longer overflows beyond the safe padding at the top. Contents will consistently overflow from the bottom.

Marp Core v3: Unsafe centering	Marp Core v4+: Safe centering

This change will be a breaking change for users who have relied on the previous centering, but we believe it is worth making this adjustment to support the creation of higher-quality presentations.

• The heading of the slide (often indicates the main subject of the slide) will be less likely to overflow from the top padding of the slide.
• Encourage slide authors to be mindful of the safe padding in the theme to help create visually appealing slides.
• Safe centering can provide early warnings of excessive content on a single slide to avoid common pitfalls "too much contents" in presentations.

Use unsafe centering

If you want to use unsafe centering, you can tweak with the following CSS:

• For default and uncover theme

<style>
  section { align-content: unsafe center; }
</style>

• For gaia theme (for lead class)

<style>
  section.lead { align-content: unsafe center; }
</style>

Unsafe centering always will center the slide contents even if overflowed, like before. The slide container is still the block element.

Revert to flex container (v3's default)

Instead of unsafe centering, you can also revert the slide container to Flexbox as same as Marp Core v3. Just set display: flex to the slide container:

• For default and uncover theme

<style>
  section { display: flex; }
</style>

• For gaia theme (for lead class)

<style>
  section.lead { display: flex; }
</style>