Introduce center widget helper

... and also make `center_x` and `center_y` set
`width` and `height` to `Length::Fill`, respectively.

This targets the most common use case when centering
things and removes a bunch of boilerplate as a result.

examples/checkbox/src/main.rs

@@ -1,5 +1,5 @@
-use iced::widget::{checkbox, column, container, row, text};
+use iced::widget::{center, checkbox, column, row, text};
-use iced::{Element, Font, Length};
+use iced::{Element, Font};
 
 const ICON_FONT: Font = Font::with_name("icons");
 
@@ -68,11 +68,6 @@ impl Example {
         let content =
             column![default_checkbox, checkboxes, custom_checkbox].spacing(20);
 
-        container(content)
+        center(content).into()
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .center_x()
-            .center_y()
-            .into()
     }
 }

examples/combo_box/src/main.rs

@@ -1,5 +1,5 @@
 use iced::widget::{
-    column, combo_box, container, scrollable, text, vertical_space,
+    center, column, combo_box, scrollable, text, vertical_space,
 };
 use iced::{Alignment, Element, Length};
 
@@ -68,12 +68,7 @@ impl Example {
         .align_items(Alignment::Center)
         .spacing(10);
 
-        container(scrollable(content))
+        center(scrollable(content)).into()
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .center_x()
-            .center_y()
-            .into()
     }
 }
 

examples/component/src/main.rs

@@ -1,5 +1,5 @@
-use iced::widget::container;
+use iced::widget::center;
-use iced::{Element, Length};
+use iced::Element;
 
 use numeric_input::numeric_input;
 
@@ -27,10 +27,8 @@ impl Component {
     }
 
     fn view(&self) -> Element<Message> {
-        container(numeric_input(self.value, Message::NumericInputChanged))
+        center(numeric_input(self.value, Message::NumericInputChanged))
             .padding(20)
-            .height(Length::Fill)
-            .center_y()
             .into()
     }
 }

examples/custom_quad/src/main.rs

@@ -81,8 +81,8 @@ mod quad {
     }
 }
 
-use iced::widget::{column, container, slider, text};
+use iced::widget::{center, column, slider, text};
-use iced::{Alignment, Color, Element, Length, Shadow, Vector};
+use iced::{Alignment, Color, Element, Shadow, Vector};
 
 pub fn main() -> iced::Result {
     iced::run("Custom Quad - Iced", Example::update, Example::view)
@@ -187,12 +187,7 @@ impl Example {
         .max_width(500)
         .align_items(Alignment::Center);
 
-        container(content)
+        center(content).into()
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .center_x()
-            .center_y()
-            .into()
     }
 }
 

examples/custom_shader/src/main.rs

@@ -4,7 +4,7 @@ use scene::Scene;
 
 use iced::time::Instant;
 use iced::widget::shader::wgpu;
-use iced::widget::{checkbox, column, container, row, shader, slider, text};
+use iced::widget::{center, checkbox, column, row, shader, slider, text};
 use iced::window;
 use iced::{Alignment, Color, Element, Length, Subscription};
 
@@ -123,12 +123,7 @@ impl IcedCubes {
         let shader =
             shader(&self.scene).width(Length::Fill).height(Length::Fill);
 
-        container(column![shader, controls].align_items(Alignment::Center))
+        center(column![shader, controls].align_items(Alignment::Center)).into()
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .center_x()
-            .center_y()
-            .into()
     }
 
     fn subscription(&self) -> Subscription<Message> {

examples/custom_widget/src/main.rs

@@ -82,8 +82,8 @@ mod circle {
 }
 
 use circle::circle;
-use iced::widget::{column, container, slider, text};
+use iced::widget::{center, column, slider, text};
-use iced::{Alignment, Element, Length};
+use iced::{Alignment, Element};
 
 pub fn main() -> iced::Result {
     iced::run("Custom Widget - Iced", Example::update, Example::view)
@@ -122,12 +122,7 @@ impl Example {
         .max_width(500)
         .align_items(Alignment::Center);
 
-        container(content)
+        center(content).into()
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .center_x()
-            .center_y()
-            .into()
     }
 }
 

examples/download_progress/src/main.rs

@@ -1,7 +1,7 @@
 mod download;
 
-use iced::widget::{button, column, container, progress_bar, text, Column};
+use iced::widget::{button, center, column, progress_bar, text, Column};
-use iced::{Alignment, Element, Length, Subscription};
+use iced::{Alignment, Element, Subscription};
 
 pub fn main() -> iced::Result {
     iced::program("Download Progress - Iced", Example::update, Example::view)
@@ -67,13 +67,7 @@ impl Example {
                 .spacing(20)
                 .align_items(Alignment::End);
 
-        container(downloads)
+        center(downloads).padding(20).into()
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .center_x()
-            .center_y()
-            .padding(20)
-            .into()
     }
 }
 

examples/editor/src/main.rs

@@ -277,7 +277,7 @@ fn action<'a, Message: Clone + 'a>(
     label: &'a str,
     on_press: Option<Message>,
 ) -> Element<'a, Message> {
-    let action = button(container(content).width(30).center_x());
+    let action = button(container(content).center_x().width(30));
 
     if let Some(on_press) = on_press {
         tooltip(

examples/events/src/main.rs

@@ -1,6 +1,6 @@
 use iced::alignment;
 use iced::event::{self, Event};
-use iced::widget::{button, checkbox, container, text, Column};
+use iced::widget::{button, center, checkbox, text, Column};
 use iced::window;
 use iced::{Alignment, Command, Element, Length, Subscription};
 
@@ -84,11 +84,6 @@ impl Events {
             .push(toggle)
             .push(exit);
 
-        container(content)
+        center(content).into()
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .center_x()
-            .center_y()
-            .into()
     }
 }

examples/exit/src/main.rs

@@ -1,6 +1,6 @@
-use iced::widget::{button, column, container};
+use iced::widget::{button, center, column};
 use iced::window;
-use iced::{Alignment, Command, Element, Length};
+use iced::{Alignment, Command, Element};
 
 pub fn main() -> iced::Result {
     iced::program("Exit - Iced", Exit::update, Exit::view).run()
@@ -46,12 +46,6 @@ impl Exit {
         .spacing(10)
         .align_items(Alignment::Center);
 
-        container(content)
+        center(content).padding(20).into()
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .padding(20)
-            .center_x()
-            .center_y()
-            .into()
     }
 }

examples/ferris/src/main.rs

@@ -1,6 +1,6 @@
 use iced::time::Instant;
 use iced::widget::{
-    checkbox, column, container, image, pick_list, row, slider, text,
+    center, checkbox, column, container, image, pick_list, row, slider, text,
 };
 use iced::window;
 use iced::{
@@ -87,28 +87,22 @@ impl Image {
     }
 
     fn view(&self) -> Element<Message> {
-        let i_am_ferris = container(
+        let i_am_ferris = column![
-            column![
+            "Hello!",
-                "Hello!",
+            Element::from(
-                Element::from(
+                image(format!(
-                    image(format!(
+                    "{}/../tour/images/ferris.png",
-                        "{}/../tour/images/ferris.png",
+                    env!("CARGO_MANIFEST_DIR")
-                        env!("CARGO_MANIFEST_DIR")
+                ))
-                    ))
+                .width(self.width)
-                    .width(self.width)
+                .content_fit(self.content_fit)
-                    .content_fit(self.content_fit)
+                .rotation(self.rotation)
-                    .rotation(self.rotation)
+            )
-                )
+            .explain(Color::WHITE),
-                .explain(Color::WHITE),
+            "I am Ferris!"
-                "I am Ferris!"
+        ]
-            ]
+        .spacing(20)
-            .spacing(20)
+        .align_items(Alignment::Center);
-            .align_items(Alignment::Center),
-        )
-        .width(Length::Fill)
-        .height(Length::Fill)
-        .center_x()
-        .center_y();
 
         let sizing = row![
             pick_list(
@@ -126,13 +120,14 @@ impl Image {
             column![
                 slider(100.0..=500.0, self.width, Message::WidthChanged),
                 text(format!("Width: {}px", self.width))
-                    .size(14)
+                    .size(12)
                     .line_height(1.0)
             ]
-            .spacing(5)
+            .spacing(2)
             .align_items(Alignment::Center)
         ]
-        .spacing(10);
+        .spacing(10)
+        .align_items(Alignment::End);
 
         let rotation = row![
             pick_list(
@@ -144,30 +139,34 @@ impl Image {
                 Message::RotationStrategyChanged,
             )
             .width(Length::Fill),
-            row![
+            column![
-                column![
+                row![
                     slider(
                         Degrees::RANGE,
                         self.rotation.degrees(),
                         Message::RotationChanged
                     ),
-                    text(format!(
+                    checkbox("Spin!", self.spin)
-                        "Rotation: {:.0}°",
+                        .text_size(12)
-                        f32::from(self.rotation.degrees())
+                        .on_toggle(Message::SpinToggled)
-                    ))
+                        .size(12)
-                    .size(14)
-                    .line_height(1.0)
                 ]
-                .spacing(5)
+                .spacing(10)
                 .align_items(Alignment::Center),
-                checkbox("Spin!", self.spin).on_toggle(Message::SpinToggled)
+                text(format!(
+                    "Rotation: {:.0}°",
+                    f32::from(self.rotation.degrees())
+                ))
+                .size(12)
+                .line_height(1.0)
             ]
-            .spacing(5)
+            .spacing(2)
             .align_items(Alignment::Center)
         ]
-        .spacing(10);
+        .spacing(10)
+        .align_items(Alignment::End);
 
-        container(column![i_am_ferris, sizing, rotation].spacing(10))
+        container(column![center(i_am_ferris), sizing, rotation].spacing(10))
             .padding(10)
             .into()
     }

examples/geometry/src/main.rs

@@ -153,7 +153,7 @@ mod rainbow {
 }
 
 use iced::widget::{column, container, scrollable};
-use iced::{Element, Length};
+use iced::Element;
 use rainbow::rainbow;
 
 pub fn main() -> iced::Result {
@@ -176,12 +176,7 @@ fn view(_state: &()) -> Element<'_, ()> {
     .spacing(20)
     .max_width(500);
 
-    let scrollable =
+    let scrollable = scrollable(container(content).center_x());
-        scrollable(container(content).width(Length::Fill).center_x());
 
-    container(scrollable)
+    container(scrollable).center_y().into()
-        .width(Length::Fill)
-        .height(Length::Fill)
-        .center_y()
-        .into()
 }

examples/layout/src/main.rs

@@ -1,8 +1,8 @@
 use iced::keyboard;
 use iced::mouse;
 use iced::widget::{
-    button, canvas, checkbox, column, container, horizontal_space, pick_list,
+    button, canvas, center, checkbox, column, container, horizontal_space,
-    row, scrollable, text,
+    pick_list, row, scrollable, text,
 };
 use iced::{
     color, Alignment, Element, Font, Length, Point, Rectangle, Renderer,
@@ -76,7 +76,7 @@ impl Layout {
         .spacing(20)
         .align_items(Alignment::Center);
 
-        let example = container(if self.explain {
+        let example = center(if self.explain {
             self.example.view().explain(color!(0x0000ff))
         } else {
             self.example.view()
@@ -87,11 +87,7 @@ impl Layout {
             container::Style::default()
                 .with_border(palette.background.strong.color, 4.0)
         })
-        .padding(4)
+        .padding(4);
-        .width(Length::Fill)
-        .height(Length::Fill)
-        .center_x()
-        .center_y();
 
         let controls = row([
             (!self.example.is_first()).then_some(
@@ -195,12 +191,7 @@ impl Default for Example {
 }
 
 fn centered<'a>() -> Element<'a, Message> {
-    container(text("I am centered!").size(50))
+    center(text("I am centered!").size(50)).into()
-        .width(Length::Fill)
-        .height(Length::Fill)
-        .center_x()
-        .center_y()
-        .into()
 }
 
 fn column_<'a>() -> Element<'a, Message> {
@@ -260,7 +251,6 @@ fn application<'a>() -> Element<'a, Message> {
             .align_items(Alignment::Center),
     )
     .style(container::rounded_box)
-    .height(Length::Fill)
     .center_y();
 
     let content = container(

examples/loading_spinners/src/main.rs

@@ -1,5 +1,5 @@
-use iced::widget::{column, container, row, slider, text};
+use iced::widget::{center, column, row, slider, text};
-use iced::{Element, Length};
+use iced::Element;
 
 use std::time::Duration;
 
@@ -73,7 +73,7 @@ impl LoadingSpinners {
         })
         .spacing(20);
 
-        container(
+        center(
             column.push(
                 row![
                     text("Cycle duration:"),
@@ -87,10 +87,6 @@ impl LoadingSpinners {
                 .spacing(20.0),
             ),
         )
-        .width(Length::Fill)
-        .height(Length::Fill)
-        .center_x()
-        .center_y()
         .into()
     }
 }

examples/loupe/src/main.rs

@@ -1,5 +1,5 @@
-use iced::widget::{button, column, container, text};
+use iced::widget::{button, center, column, text};
-use iced::{Alignment, Element, Length};
+use iced::{Alignment, Element};
 
 use loupe::loupe;
 
@@ -31,7 +31,7 @@ impl Loupe {
     }
 
     fn view(&self) -> Element<Message> {
-        container(loupe(
+        center(loupe(
             3.0,
             column![
                 button("Increment").on_press(Message::Increment),
@@ -41,10 +41,6 @@ impl Loupe {
             .padding(20)
             .align_items(Alignment::Center),
         ))
-        .width(Length::Fill)
-        .height(Length::Fill)
-        .center_x()
-        .center_y()
         .into()
     }
 }

examples/modal/src/main.rs

@@ -2,8 +2,8 @@ use iced::event::{self, Event};
 use iced::keyboard;
 use iced::keyboard::key;
 use iced::widget::{
-    self, button, column, container, horizontal_space, mouse_area, opaque,
+    self, button, center, column, container, horizontal_space, mouse_area,
-    pick_list, row, stack, text, text_input,
+    opaque, pick_list, row, stack, text, text_input,
 };
 use iced::{Alignment, Color, Command, Element, Length, Subscription};
 
@@ -98,13 +98,7 @@ impl App {
                 row![text("Top Left"), horizontal_space(), text("Top Right")]
                     .align_items(Alignment::Start)
                     .height(Length::Fill),
-                container(
+                center(button(text("Show Modal")).on_press(Message::ShowModal)),
-                    button(text("Show Modal")).on_press(Message::ShowModal)
-                )
-                .center_x()
-                .center_y()
-                .width(Length::Fill)
-                .height(Length::Fill),
                 row![
                     text("Bottom Left"),
                     horizontal_space(),
@@ -115,9 +109,7 @@ impl App {
             ]
             .height(Length::Fill),
         )
-        .padding(10)
+        .padding(10);
-        .width(Length::Fill)
-        .height(Length::Fill);
 
         if self.show_modal {
             let signup = container(
@@ -210,25 +202,18 @@ where
 {
     stack![
         base.into(),
-        mouse_area(
+        mouse_area(center(opaque(content)).style(|_theme| {
-            container(opaque(content))
+            container::Style {
-                .width(Length::Fill)
+                background: Some(
-                .height(Length::Fill)
+                    Color {
-                .center_x()
+                        a: 0.8,
-                .center_y()
+                        ..Color::BLACK
-                .style(|_theme| {
-                    container::Style {
-                        background: Some(
-                            Color {
-                                a: 0.8,
-                                ..Color::BLACK
-                            }
-                            .into(),
-                        ),
-                        ..container::Style::default()
                     }
-                })
+                    .into(),
-        )
+                ),
+                ..container::Style::default()
+            }
+        }))
         .on_press(on_blur)
     ]
     .into()

examples/multi_window/src/main.rs

@@ -1,7 +1,9 @@
 use iced::event;
 use iced::executor;
 use iced::multi_window::{self, Application};
-use iced::widget::{button, column, container, scrollable, text, text_input};
+use iced::widget::{
+    button, center, column, container, scrollable, text, text_input,
+};
 use iced::window;
 use iced::{
     Alignment, Command, Element, Length, Point, Settings, Subscription, Theme,
@@ -128,12 +130,7 @@ impl multi_window::Application for Example {
     fn view(&self, window: window::Id) -> Element<Message> {
         let content = self.windows.get(&window).unwrap().view(window);
 
-        container(content)
+        center(content).into()
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .center_x()
-            .center_y()
-            .into()
     }
 
     fn theme(&self, window: window::Id) -> Self::Theme {
@@ -210,6 +207,6 @@ impl Window {
                 .align_items(Alignment::Center),
         );
 
-        container(content).width(200).center_x().into()
+        container(content).center_x().width(200).into()
     }
 }

examples/pane_grid/src/main.rs

@@ -291,12 +291,7 @@ fn view_content<'a>(
     .spacing(10)
     .align_items(Alignment::Center);
 
-    container(scrollable(content))
+    container(scrollable(content)).center_y().padding(5).into()
-        .width(Length::Fill)
-        .height(Length::Fill)
-        .padding(5)
-        .center_y()
-        .into()
 }
 
 fn view_controls<'a>(

examples/pokedex/src/main.rs

@@ -1,5 +1,5 @@
 use iced::futures;
-use iced::widget::{self, column, container, image, row, text};
+use iced::widget::{self, center, column, image, row, text};
 use iced::{Alignment, Command, Element, Length};
 
 pub fn main() -> iced::Result {
@@ -83,12 +83,7 @@ impl Pokedex {
             .align_items(Alignment::End),
         };
 
-        container(content)
+        center(content).into()
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .center_x()
-            .center_y()
-            .into()
     }
 }
 

examples/qr_code/src/main.rs

@@ -1,7 +1,5 @@
-use iced::widget::{
+use iced::widget::{center, column, pick_list, qr_code, row, text, text_input};
-    column, container, pick_list, qr_code, row, text, text_input,
+use iced::{Alignment, Element, Theme};
-};
-use iced::{Alignment, Element, Length, Theme};
 
 pub fn main() -> iced::Result {
     iced::program(
@@ -72,13 +70,7 @@ impl QRGenerator {
             .spacing(20)
             .align_items(Alignment::Center);
 
-        container(content)
+        center(content).padding(20).into()
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .padding(20)
-            .center_x()
-            .center_y()
-            .into()
     }
 
     fn theme(&self) -> Theme {

examples/screenshot/src/main.rs

@@ -123,12 +123,10 @@ impl Example {
         };
 
         let image = container(image)
+            .center_y()
             .padding(10)
             .style(container::rounded_box)
-            .width(Length::FillPortion(2))
+            .width(Length::FillPortion(2));
-            .height(Length::Fill)
-            .center_x()
-            .center_y();
 
         let crop_origin_controls = row![
             text("X:")
@@ -213,12 +211,7 @@ impl Example {
             .spacing(40)
         };
 
-        let side_content = container(controls)
+        let side_content = container(controls).center_y();
-            .align_x(alignment::Horizontal::Center)
-            .width(Length::FillPortion(1))
-            .height(Length::Fill)
-            .center_y()
-            .center_x();
 
         let content = row![side_content, image]
             .spacing(10)
@@ -226,13 +219,7 @@ impl Example {
             .height(Length::Fill)
             .align_items(Alignment::Center);
 
-        container(content)
+        container(content).padding(10).into()
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .padding(10)
-            .center_x()
-            .center_y()
-            .into()
     }
 
     fn subscription(&self) -> Subscription<Message> {

examples/scrollable/src/main.rs

@@ -327,7 +327,7 @@ impl ScrollableDemo {
                 .spacing(10)
                 .into();
 
-        container(content).padding(20).center_x().center_y().into()
+        container(content).padding(20).into()
     }
 
     fn theme(&self) -> Theme {

examples/slider/src/main.rs

@@ -1,5 +1,5 @@
-use iced::widget::{column, container, slider, text, vertical_slider};
+use iced::widget::{center, column, container, slider, text, vertical_slider};
-use iced::{Element, Length};
+use iced::Element;
 
 pub fn main() -> iced::Result {
     iced::run("Slider - Iced", Slider::update, Slider::view)
@@ -54,18 +54,14 @@ impl Slider {
 
         let text = text(self.value);
 
-        container(
+        center(
             column![
-                container(v_slider).width(Length::Fill).center_x(),
+                container(v_slider).center_x(),
-                container(h_slider).width(Length::Fill).center_x(),
+                container(h_slider).center_x(),
-                container(text).width(Length::Fill).center_x(),
+                container(text).center_x()
             ]
             .spacing(25),
         )
-        .height(Length::Fill)
-        .width(Length::Fill)
-        .center_x()
-        .center_y()
         .into()
     }
 }

examples/stopwatch/src/main.rs

@@ -1,8 +1,8 @@
 use iced::alignment;
 use iced::keyboard;
 use iced::time;
-use iced::widget::{button, column, container, row, text};
+use iced::widget::{button, center, column, row, text};
-use iced::{Alignment, Element, Length, Subscription, Theme};
+use iced::{Alignment, Element, Subscription, Theme};
 
 use std::time::{Duration, Instant};
 
@@ -128,12 +128,7 @@ impl Stopwatch {
             .align_items(Alignment::Center)
             .spacing(20);
 
-        container(content)
+        center(content).into()
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .center_x()
-            .center_y()
-            .into()
     }
 
     fn theme(&self) -> Theme {

examples/styling/src/main.rs

@@ -1,7 +1,7 @@
 use iced::widget::{
-    button, checkbox, column, container, horizontal_rule, pick_list,
+    button, center, checkbox, column, horizontal_rule, pick_list, progress_bar,
-    progress_bar, row, scrollable, slider, text, text_input, toggler,
+    row, scrollable, slider, text, text_input, toggler, vertical_rule,
-    vertical_rule, vertical_space,
+    vertical_space,
 };
 use iced::{Alignment, Element, Length, Theme};
 
@@ -106,12 +106,7 @@ impl Styling {
         .padding(20)
         .max_width(600);
 
-        container(content)
+        center(content).into()
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .center_x()
-            .center_y()
-            .into()
     }
 
     fn theme(&self) -> Theme {

examples/svg/src/main.rs

@@ -1,4 +1,4 @@
-use iced::widget::{checkbox, column, container, svg};
+use iced::widget::{center, checkbox, column, container, svg};
 use iced::{color, Element, Length};
 
 pub fn main() -> iced::Result {
@@ -44,19 +44,12 @@ impl Tiger {
             checkbox("Apply a color filter", self.apply_color_filter)
                 .on_toggle(Message::ToggleColorFilter);
 
-        container(
+        center(
-            column![
+            column![svg, container(apply_color_filter).center_x()]
-                svg,
+                .spacing(20)
-                container(apply_color_filter).width(Length::Fill).center_x()
+                .height(Length::Fill),
-            ]
-            .spacing(20)
-            .height(Length::Fill),
         )
-        .width(Length::Fill)
-        .height(Length::Fill)
         .padding(20)
-        .center_x()
-        .center_y()
         .into()
     }
 }

examples/system_information/src/main.rs

@@ -1,5 +1,5 @@
 use iced::widget::{button, column, container, text};
-use iced::{system, Command, Element, Length};
+use iced::{system, Command, Element};
 
 pub fn main() -> iced::Result {
     iced::program("System Information - Iced", Example::update, Example::view)
@@ -136,11 +136,6 @@ impl Example {
             }
         };
 
-        container(content)
+        container(content).center().into()
-            .center_x()
-            .center_y()
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .into()
     }
 }

examples/toast/src/main.rs

@@ -2,7 +2,7 @@ use iced::event::{self, Event};
 use iced::keyboard;
 use iced::keyboard::key;
 use iced::widget::{
-    self, button, column, container, pick_list, row, slider, text, text_input,
+    self, button, center, column, pick_list, row, slider, text, text_input,
 };
 use iced::{Alignment, Command, Element, Length, Subscription};
 
@@ -102,7 +102,7 @@ impl App {
                 .then_some(Message::Add),
         );
 
-        let content = container(
+        let content = center(
             column![
                 subtitle(
                     "Title",
@@ -146,11 +146,7 @@ impl App {
             ]
             .spacing(10)
             .max_width(200),
-        )
+        );
-        .width(Length::Fill)
-        .height(Length::Fill)
-        .center_x()
-        .center_y();
 
         toast::Manager::new(content, &self.toasts, Message::Close)
             .timeout(self.timeout_secs)

examples/todos/src/main.rs

@@ -1,8 +1,8 @@
 use iced::alignment::{self, Alignment};
 use iced::keyboard;
 use iced::widget::{
-    self, button, checkbox, column, container, keyed_column, row, scrollable,
+    self, button, center, checkbox, column, container, keyed_column, row,
-    text, text_input, Text,
+    scrollable, text, text_input, Text,
 };
 use iced::window;
 use iced::{Command, Element, Font, Length, Subscription};
@@ -238,7 +238,7 @@ impl Todos {
                     .spacing(20)
                     .max_width(800);
 
-                scrollable(container(content).padding(40).center_x()).into()
+                scrollable(container(content).center_x().padding(40)).into()
             }
         }
     }
@@ -435,19 +435,16 @@ impl Filter {
 }
 
 fn loading_message<'a>() -> Element<'a, Message> {
-    container(
+    center(
         text("Loading...")
             .horizontal_alignment(alignment::Horizontal::Center)
             .size(50),
     )
-    .width(Length::Fill)
-    .height(Length::Fill)
-    .center_y()
     .into()
 }
 
 fn empty_message(message: &str) -> Element<'_, Message> {
-    container(
+    center(
         text(message)
             .width(Length::Fill)
             .size(25)
@@ -455,7 +452,6 @@ fn empty_message(message: &str) -> Element<'_, Message> {
             .color([0.7, 0.7, 0.7]),
     )
     .height(200)
-    .center_y()
     .into()
 }
 

examples/tooltip/src/main.rs

@@ -1,6 +1,6 @@
 use iced::widget::tooltip::Position;
-use iced::widget::{button, container, tooltip};
+use iced::widget::{button, center, container, tooltip};
-use iced::{Element, Length};
+use iced::Element;
 
 pub fn main() -> iced::Result {
     iced::run("Tooltip - Iced", Tooltip::update, Tooltip::view)
@@ -43,12 +43,7 @@ impl Tooltip {
         .gap(10)
         .style(container::rounded_box);
 
-        container(tooltip)
+        center(tooltip).into()
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .center_x()
-            .center_y()
-            .into()
     }
 }
 

examples/tour/src/main.rs

@@ -76,11 +76,10 @@ impl Tour {
             } else {
                 content
             })
-            .width(Length::Fill)
             .center_x(),
         );
 
-        container(scrollable).height(Length::Fill).center_y().into()
+        container(scrollable).center_y().into()
     }
 }
 
@@ -670,7 +669,6 @@ fn ferris<'a>(
         .filter_method(filter_method)
         .width(width),
     )
-    .width(Length::Fill)
     .center_x()
 }
 

examples/url_handler/src/main.rs

@@ -1,6 +1,6 @@
 use iced::event::{self, Event};
-use iced::widget::{container, text};
+use iced::widget::{center, text};
-use iced::{Element, Length, Subscription};
+use iced::{Element, Subscription};
 
 pub fn main() -> iced::Result {
     iced::program("URL Handler - Iced", App::update, App::view)
@@ -44,11 +44,6 @@ impl App {
             None => text("No URL received yet!"),
         };
 
-        container(content.size(48))
+        center(content.size(48)).into()
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .center_x()
-            .center_y()
-            .into()
     }
 }

examples/websocket/src/main.rs

@@ -1,9 +1,7 @@
 mod echo;
 
 use iced::alignment::{self, Alignment};
-use iced::widget::{
+use iced::widget::{button, center, column, row, scrollable, text, text_input};
-    button, column, container, row, scrollable, text, text_input,
-};
 use iced::{color, Command, Element, Length, Subscription};
 use once_cell::sync::Lazy;
 
@@ -85,14 +83,10 @@ impl WebSocket {
 
     fn view(&self) -> Element<Message> {
         let message_log: Element<_> = if self.messages.is_empty() {
-            container(
+            center(
                 text("Your messages will appear here...")
                     .color(color!(0x888888)),
             )
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .center_x()
-            .center_y()
             .into()
         } else {
             scrollable(

tiny_skia/src/engine.rs

@@ -539,10 +539,10 @@ impl Engine {
     pub fn draw_image(
         &mut self,
         image: &Image,
-        transformation: Transformation,
+        _transformation: Transformation,
-        pixels: &mut tiny_skia::PixmapMut<'_>,
+        _pixels: &mut tiny_skia::PixmapMut<'_>,
-        clip_mask: &mut tiny_skia::Mask,
+        _clip_mask: &mut tiny_skia::Mask,
-        clip_bounds: Rectangle,
+        _clip_bounds: Rectangle,
     ) {
         match image {
             #[cfg(feature = "image")]
@@ -552,19 +552,19 @@ impl Engine {
                 bounds,
                 rotation,
             } => {
-                let physical_bounds = *bounds * transformation;
+                let physical_bounds = *bounds * _transformation;
 
-                if !clip_bounds.intersects(&physical_bounds) {
+                if !_clip_bounds.intersects(&physical_bounds) {
                     return;
                 }
 
-                let clip_mask = (!physical_bounds.is_within(&clip_bounds))
+                let clip_mask = (!physical_bounds.is_within(&_clip_bounds))
-                    .then_some(clip_mask as &_);
+                    .then_some(_clip_mask as &_);
 
                 let center = physical_bounds.center();
                 let radians = f32::from(*rotation);
 
-                let transform = into_transform(transformation).post_rotate_at(
+                let transform = into_transform(_transformation).post_rotate_at(
                     radians.to_degrees(),
                     center.x,
                     center.y,
@@ -574,7 +574,7 @@ impl Engine {
                     handle,
                     *filter_method,
                     *bounds,
-                    pixels,
+                    _pixels,
                     transform,
                     clip_mask,
                 );
@@ -586,19 +586,19 @@ impl Engine {
                 bounds,
                 rotation,
             } => {
-                let physical_bounds = *bounds * transformation;
+                let physical_bounds = *bounds * _transformation;
 
-                if !clip_bounds.intersects(&physical_bounds) {
+                if !_clip_bounds.intersects(&physical_bounds) {
                     return;
                 }
 
-                let clip_mask = (!physical_bounds.is_within(&clip_bounds))
+                let clip_mask = (!physical_bounds.is_within(&_clip_bounds))
-                    .then_some(clip_mask as &_);
+                    .then_some(_clip_mask as &_);
 
                 let center = physical_bounds.center();
                 let radians = f32::from(*rotation);
 
-                let transform = into_transform(transformation).post_rotate_at(
+                let transform = into_transform(_transformation).post_rotate_at(
                     radians.to_degrees(),
                     center.x,
                     center.y,
@@ -608,7 +608,7 @@ impl Engine {
                     handle,
                     *color,
                     physical_bounds,
-                    pixels,
+                    _pixels,
                     transform,
                     clip_mask,
                 );

tiny_skia/src/lib.rs

@@ -29,7 +29,7 @@ pub use geometry::Geometry;
 
 use crate::core::renderer;
 use crate::core::{
-    Background, Color, Font, Pixels, Point, Radians, Rectangle, Transformation,
+    Background, Color, Font, Pixels, Point, Rectangle, Transformation,
 };
 use crate::engine::Engine;
 use crate::graphics::compositor;
@@ -377,7 +377,7 @@ impl core::image::Renderer for Renderer {
         handle: Self::Handle,
         filter_method: core::image::FilterMethod,
         bounds: Rectangle,
-        rotation: Radians,
+        rotation: core::Radians,
     ) {
         let (layer, transformation) = self.layers.current_mut();
         layer.draw_image(
@@ -404,7 +404,7 @@ impl core::svg::Renderer for Renderer {
         handle: core::svg::Handle,
         color: Option<Color>,
         bounds: Rectangle,
-        rotation: Radians,
+        rotation: core::Radians,
     ) {
         let (layer, transformation) = self.layers.current_mut();
         layer.draw_svg(handle, color, bounds, transformation, rotation);

wgpu/src/lib.rs

@@ -61,8 +61,8 @@ pub use settings::Settings;
 pub use geometry::Geometry;
 
 use crate::core::{
-    Background, Color, Font, Pixels, Point, Radians, Rectangle, Size,
+    Background, Color, Font, Pixels, Point, Rectangle, Size, Transformation,
-    Transformation, Vector,
+    Vector,
 };
 use crate::graphics::text::{Editor, Paragraph};
 use crate::graphics::Viewport;
@@ -517,7 +517,7 @@ impl core::image::Renderer for Renderer {
         handle: Self::Handle,
         filter_method: core::image::FilterMethod,
         bounds: Rectangle,
-        rotation: Radians,
+        rotation: core::Radians,
     ) {
         let (layer, transformation) = self.layers.current_mut();
         layer.draw_image(
@@ -541,7 +541,7 @@ impl core::svg::Renderer for Renderer {
         handle: core::svg::Handle,
         color_filter: Option<Color>,
         bounds: Rectangle,
-        rotation: Radians,
+        rotation: core::Radians,
     ) {
         let (layer, transformation) = self.layers.current_mut();
         layer.draw_svg(handle, color_filter, bounds, transformation, rotation);

widget/src/container.rs

@@ -92,6 +92,49 @@ where
         self
     }
 
+    /// Sets the [`Container`] to fill the available space in the horizontal axis.
+    ///
+    /// This can be useful to quickly position content when chained with
+    /// alignment functions—like [`center_x`].
+    ///
+    /// Calling this method is equivalent to calling [`width`] with a
+    /// [`Length::Fill`].
+    ///
+    /// [`center_x`]: Self::center_x
+    /// [`width`]: Self::width
+    pub fn fill_x(self) -> Self {
+        self.width(Length::Fill)
+    }
+
+    /// Sets the [`Container`] to fill the available space in the vetical axis.
+    ///
+    /// This can be useful to quickly position content when chained with
+    /// alignment functions—like [`center_y`].
+    ///
+    /// Calling this method is equivalent to calling [`height`] with a
+    /// [`Length::Fill`].
+    ///
+    /// [`center_y`]: Self::center_x
+    /// [`height`]: Self::height
+    pub fn fill_y(self) -> Self {
+        self.height(Length::Fill)
+    }
+
+    /// Sets the [`Container`] to fill all the available space.
+    ///
+    /// This can be useful to quickly position content when chained with
+    /// alignment functions—like [`center`].
+    ///
+    /// Calling this method is equivalent to chaining [`fill_x`] and
+    /// [`fill_y`].
+    ///
+    /// [`center`]: Self::center
+    /// [`fill_x`]: Self::fill_x
+    /// [`fill_y`]: Self::fill_y
+    pub fn fill(self) -> Self {
+        self.width(Length::Fill).height(Length::Fill)
+    }
+
     /// Sets the maximum width of the [`Container`].
     pub fn max_width(mut self, max_width: impl Into<Pixels>) -> Self {
         self.max_width = max_width.into().0;
@@ -116,18 +159,33 @@ where
         self
     }
 
-    /// Centers the contents in the horizontal axis of the [`Container`].
+    /// Sets the [`Container`] to fill the available space in the horizontal axis
+    /// and centers its contents there.
     pub fn center_x(mut self) -> Self {
+        self.width = Length::Fill;
         self.horizontal_alignment = alignment::Horizontal::Center;
         self
     }
 
-    /// Centers the contents in the vertical axis of the [`Container`].
+    /// Sets the [`Container`] to fill the available space in the vertical axis
+    /// and centers its contents there.
     pub fn center_y(mut self) -> Self {
+        self.height = Length::Fill;
         self.vertical_alignment = alignment::Vertical::Center;
         self
     }
 
+    /// Centers the contents in both the horizontal and vertical axes of the
+    /// [`Container`].
+    ///
+    /// This is equivalent to chaining [`center_x`] and [`center_y`].
+    ///
+    /// [`center_x`]: Self::center_x
+    /// [`center_y`]: Self::center_y
+    pub fn center(self) -> Self {
+        self.center_x().center_y()
+    }
+
     /// Sets whether the contents of the [`Container`] should be clipped on
     /// overflow.
     pub fn clip(mut self, clip: bool) -> Self {

widget/src/helpers.rs

@@ -78,6 +78,27 @@ where
     Container::new(content)
 }
 
+/// Creates a new [`Container`] that fills all the available space
+/// and centers its contents inside.
+///
+/// This is equivalent to:
+/// ```rust,no_run
+/// # use iced_widget::Container;
+/// # fn container<A>(x: A) -> Container<'static, ()> { unreachable!() }
+/// let centered = container("Centered!").center();
+/// ```
+///
+/// [`Container`]: crate::Container
+pub fn center<'a, Message, Theme, Renderer>(
+    content: impl Into<Element<'a, Message, Theme, Renderer>>,
+) -> Container<'a, Message, Theme, Renderer>
+where
+    Theme: container::Catalog + 'a,
+    Renderer: core::Renderer,
+{
+    container(content).fill().center()
+}
+
 /// Creates a new [`Column`] with the given children.
 pub fn column<'a, Message, Theme, Renderer>(
     children: impl IntoIterator<Item = Element<'a, Message, Theme, Renderer>>,