diff --git a/examples/modal/src/main.rs b/examples/modal/src/main.rs
index 92d490ea..ae123738 100644
--- a/examples/modal/src/main.rs
+++ b/examples/modal/src/main.rs
@@ -146,6 +146,7 @@ impl Application for ModalExample {
                 )
                 .backdrop(Message::CloseModal)
                 .on_esc(Message::CloseModal)
+                .align_y(alignment::Vertical::Top)
                 .into()
             }
         }
diff --git a/src/native/modal.rs b/src/native/modal.rs
index 37ff704a..7c700fcd 100644
--- a/src/native/modal.rs
+++ b/src/native/modal.rs
@@ -2,7 +2,7 @@
 //!
 //! *This API requires the following crate features to be activated: modal*
 use iced_widget::core::{
-    self, event,
+    self, alignment, event,
     layout::{Limits, Node},
     mouse::{self, Cursor},
     overlay, renderer,
@@ -55,6 +55,8 @@ where
     esc: Option<Message>,
     /// The style of the [`ModalOverlay`](ModalOverlay).
     style: <Renderer::Theme as StyleSheet>::Style,
+    horizontal_alignment: alignment::Horizontal,
+    vertical_alignment: alignment::Vertical,
 }
 
 impl<'a, Message, Renderer> Modal<'a, Message, Renderer>
@@ -74,11 +76,11 @@ where
     ///     * the underlay [`Element`] on which this [`Modal`](Modal)
     ///         will be wrapped around.
     ///     * the content [`Element`] of the [`Modal`](Modal).
-    pub fn new<U, C>(show_modal: bool, underlay: U, content: C) -> Self
-    where
-        U: Into<Element<'a, Message, Renderer>>,
-        C: Into<Element<'a, Message, Renderer>>,
-    {
+    pub fn new(
+        show_modal: bool,
+        underlay: impl Into<Element<'a, Message, Renderer>>,
+        content: impl Into<Element<'a, Message, Renderer>>,
+    ) -> Self {
         Modal {
             show_modal,
             underlay: underlay.into(),
@@ -86,6 +88,8 @@ where
             backdrop: None,
             esc: None,
             style: <Renderer::Theme as StyleSheet>::Style::default(),
+            horizontal_alignment: alignment::Horizontal::Center,
+            vertical_alignment: alignment::Vertical::Center,
         }
     }
 
@@ -113,6 +117,20 @@ where
         self.style = style;
         self
     }
+
+    /// Sets the content alignment for the horizontal axis of the [`Modal`](Modal).
+    #[must_use]
+    pub fn align_x(mut self, alignment: alignment::Horizontal) -> Self {
+        self.horizontal_alignment = alignment;
+        self
+    }
+
+    /// Sets the content alignment for the vertical axis of the [`Modal`](Modal).
+    #[must_use]
+    pub fn align_y(mut self, alignment: alignment::Vertical) -> Self {
+        self.vertical_alignment = alignment;
+        self
+    }
 }
 
 impl<'a, Message, Renderer> Widget<Message, Renderer> for Modal<'a, Message, Renderer>
@@ -229,6 +247,8 @@ where
                     self.backdrop.clone(),
                     self.esc.clone(),
                     self.style,
+                    self.horizontal_alignment,
+                    self.vertical_alignment,
                 )),
             ))
         } else {
diff --git a/src/native/overlay/modal.rs b/src/native/overlay/modal.rs
index 94164bed..a94288ee 100644
--- a/src/native/overlay/modal.rs
+++ b/src/native/overlay/modal.rs
@@ -2,11 +2,11 @@
 //!
 //! *This API requires the following crate features to be activated: modal*
 use iced_widget::core::{
-    self, event, keyboard, layout,
+    self, alignment, event, keyboard, layout,
     mouse::{self, Cursor},
     renderer, touch,
     widget::Tree,
-    Clipboard, Color, Element, Event, Layout, Overlay, Point, Rectangle, Shell, Size, Vector,
+    Alignment, Clipboard, Color, Element, Event, Layout, Overlay, Point, Rectangle, Shell, Size,
 };
 
 use crate::style::modal::StyleSheet;
@@ -29,6 +29,8 @@ where
     esc: Option<Message>,
     /// The style of the [`ModalOverlay`](ModalOverlay).
     style: <Renderer::Theme as StyleSheet>::Style,
+    horizontal_alignment: alignment::Horizontal,
+    vertical_alignment: alignment::Vertical,
 }
 
 impl<'a, 'b, Message, Renderer> ModalOverlay<'a, 'b, Message, Renderer>
@@ -44,6 +46,8 @@ where
         backdrop: Option<Message>,
         esc: Option<Message>,
         style: <Renderer::Theme as StyleSheet>::Style,
+        horizontal_alignment: alignment::Horizontal,
+        vertical_alignment: alignment::Vertical,
     ) -> Self {
         ModalOverlay {
             state,
@@ -51,6 +55,8 @@ where
             backdrop,
             esc,
             style,
+            horizontal_alignment,
+            vertical_alignment,
         }
     }
 }
@@ -62,25 +68,16 @@ where
     Renderer: core::Renderer,
     Renderer::Theme: StyleSheet,
 {
-    fn layout(&self, renderer: &Renderer, bounds: Size, position: Point) -> layout::Node {
+    fn layout(&self, renderer: &Renderer, bounds: Size, _position: Point) -> layout::Node {
         let limits = layout::Limits::new(Size::ZERO, bounds);
-
         let mut content = self.content.as_widget().layout(renderer, &limits);
-
-        // Center position
         let max_size = limits.max();
-        let container_half_width = max_size.width / 2.0;
-        let container_half_height = max_size.height / 2.0;
-        let content_half_width = content.bounds().width / 2.0;
-        let content_half_height = content.bounds().height / 2.0;
 
-        let position = position
-            + Vector::new(
-                container_half_width - content_half_width,
-                container_half_height - content_half_height,
-            );
-
-        content.move_to(position);
+        content.align(
+            Alignment::from(self.horizontal_alignment),
+            Alignment::from(self.vertical_alignment),
+            max_size,
+        );
 
         layout::Node::with_children(max_size, vec![content])
     }