React-Bootstrap Modal: Centered Prop vs. Custom CSS Positioning

When implementing a modal layout in React-Bootstrap (v2.x), developers must choose between the built-in centered prop and custom CSS overrides for vertical alignment. The centered prop leverages Bootstrap's Flexbox implementation to center the .modal-dialog within the viewport.

However, specific design constraints may require precise offsets or non-standard alignments that the boolean centered prop cannot provide. Overriding these styles with custom CSS allows for granular control but introduces a dependency on manual synchronization with Bootstrap's responsive breakpoints to prevent layout shifts on smaller screens.

Given the need to maintain responsiveness across various viewport sizes while achieving a specific vertical offset, which approach is more sustainable for long-term maintenance?

• Does the centered prop provide enough flexibility for slight offsets via utility classes?
• What are the risks of using absolute positioning on the .modal-dialog relative to the portal's z-index management?