[v4] Always treat the slide container of built-in themes as block element

[yhatt]

Recent browsers (Chrome >= 123, Firefox >= 125, Safari >= 17.4) become supported align-content: center for the block container.

section {
  display: block;
  align-content: center;
}

• Chrome: https://developer.chrome.com/blog/align-content
• Firefox: https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/125
• Safari: https://webkit.org/blog/15063/webkit-features-in-safari-17-4#align-content-everywhere
• Can I use: https://caniuse.com/mdn-css_properties_align-content_block_context

Currently Marp built-in themes are using the flexbox container as the slide section to make centering contents vertically.

section {
  display: flex;
  align-items: center;
}

However, some CSS features that are useful for the layout are not available in the flexbox:

• Floating element (float: right)
• Multi-columns layout (columns: 2)
• Margin collapsing
• etc...

They had actually brought users confusion like following:

• How should I use floating elements? marp#50
• Any initiative to implement columns in Marp? marp#192 (reply in thread)

In next major version, we have to consider to adopt align-content: center with display: block as the slide container for vertically centering.

Backward compatibillity

Between the block container and flexbox container, there is a small difference in the behavior of vertically centering when sticked out inner contents.

• Contents within flexbox container always will keep the center of the slide, regardless of the slide padding.
  When overflowed, the inner contents will stick out from both upper and lower side of the slide.
• Contents within block container will try to keep the center of the slide, but not interfere with the slide padding.
  When overflowed, the inner contents will stick out only from the lower side of the slide.

Changing the slide container style may affect to the layout of existing slides. Thus, this change must be a major change of Marp Core, and must provide a workaround to get back into the behavior of flex container through an inline style.