Issue Centering Text Vertically on Labels Using MAUI

Question

I'm using the following code to create and render a simple Label. The layout is set to have the same height and width as the screen.

maincontent = new Microsoft.Maui.Controls.AbsoluteLayout
{
    BackgroundColor = Microsoft.Maui.Graphics.Color.FromArgb("#FF221E1F"),
    HeightRequest = mainmescreenheight,
    IsEnabled = true,
    IsVisible = true,
    WidthRequest = mainmescreenwidth
};

Microsoft.Maui.Controls.Label newLabel = new Microsoft.Maui.Controls.Label
{
    BackgroundColor = Microsoft.Maui.Graphics.Color.FromArgb("#FF221E1F"),
    FontAttributes = Microsoft.Maui.Controls.FontAttributes.Bold,
    FontFamily = "VerdanaBold",
    FontSize = 14,
    HorizontalOptions = Microsoft.Maui.Controls.LayoutOptions.Center,
    HorizontalTextAlignment = Microsoft.Maui.TextAlignment.Center,
    IsEnabled = true,
    IsVisible = true,
    MinimumHeightRequest = 300,
    MinimumWidthRequest = 640,
    Text = "Center of Label",
    TextColor = Microsoft.Maui.Graphics.Color.FromArgb("#FFFFFFFF"),
    VerticalTextAlignment = Microsoft.Maui.TextAlignment.Center,
    VerticalOptions = Microsoft.Maui.Controls.LayoutOptions.Center
};
AbsoluteLayout.SetLayoutFlags(newLabel, Microsoft.Maui.Layouts.AbsoluteLayoutFlags.None);
AbsoluteLayout.SetLayoutBounds(newLabel, new Rect(0, 0, 640, 300));
maincontent.Children.Add(newLabel);

I want the text, in this case "Center of Label" to appear both vertically and horizontally centered.

Although the text is always horizontally centered, it always appears at the very top of the label as if VerticalTextAlignment and VerticalOptions were set to .Start rather than .Center.

How do I get the text to center vertically? This is net7.0-windows10.0.19041.0.

Answer 1

Assuming

I'm using the following code to create and render a simple Label. The layout is set to have the same height and width as the screen.

Your AbsoluteLayout setup is the problem and the Min Height/Width is unnecessary.

Below is how your code should look:

maincontent = new Microsoft.Maui.Controls.AbsoluteLayout
{
    BackgroundColor = Microsoft.Maui.Graphics.Color.FromArgb("#FF221E1F"),
    HeightRequest = mainmescreenheight, 
    WidthRequest = mainmescreenwidth
};

Microsoft.Maui.Controls.Label newLabel = new Microsoft.Maui.Controls.Label
{
    BackgroundColor = Microsoft.Maui.Graphics.Color.FromArgb("#FF221E1F"),
    FontAttributes = Microsoft.Maui.Controls.FontAttributes.Bold,
    FontFamily = "VerdanaBold",
    FontSize = 14,
    HorizontalOptions = Microsoft.Maui.Controls.LayoutOptions.Center,
    HorizontalTextAlignment = Microsoft.Maui.TextAlignment.Center,
    Text = "Center of Label",
    TextColor = Microsoft.Maui.Graphics.Color.FromArgb("#FFFFFFFF"),
    VerticalTextAlignment = Microsoft.Maui.TextAlignment.Center,
    VerticalOptions = Microsoft.Maui.Controls.LayoutOptions.Center
};
AbsoluteLayout.SetLayoutFlags(newLabel, Microsoft.Maui.Layouts.AbsoluteLayoutFlags.All);
AbsoluteLayout.SetLayoutBounds(newLabel, new Rect(0, 0, 1, 1));
maincontent.Children.Add(newLabel);

Also, I have no clue why you have

HeightRequest = mainmescreenheight

or

WidthRequest = mainmescreenwidth

In your AbsoluteLayout.

AbsoluteLayout by default fits into its parent.

Answer 2

Update

Here is a demo I created,

public MainPage()
{
    InitializeComponent();
    AbsoluteLayout maincontent = new Microsoft.Maui.Controls.AbsoluteLayout
    {
        BackgroundColor = Microsoft.Maui.Graphics.Color.FromArgb("#FF221E1F"),
        IsEnabled = true,
        IsVisible = true,
    };

    Microsoft.Maui.Controls.Label newLabel = new Microsoft.Maui.Controls.Label
    {
        BackgroundColor = Microsoft.Maui.Graphics.Color.FromArgb("#FF221E1F"),
        FontAttributes = Microsoft.Maui.Controls.FontAttributes.Bold,
        FontFamily = "VerdanaBold",
        FontSize = 14,
        HorizontalOptions = Microsoft.Maui.Controls.LayoutOptions.Center,
        HorizontalTextAlignment = Microsoft.Maui.TextAlignment.Center,
        IsEnabled = true,
        IsVisible = true,
        Text = "Center of Label",
        TextColor = Microsoft.Maui.Graphics.Color.FromArgb("#FFFFFFFF"),
        VerticalTextAlignment = Microsoft.Maui.TextAlignment.Center,
        VerticalOptions = Microsoft.Maui.Controls.LayoutOptions.Center
    };
    AbsoluteLayout.SetLayoutFlags(newLabel, Microsoft.Maui.Layouts.AbsoluteLayoutFlags.PositionProportional);
    AbsoluteLayout.SetLayoutBounds(newLabel, new Rect(0.5, 0.5, 640, 300));
    maincontent.Children.Add(newLabel);

    Content = maincontent;
}

This is the effect, is this what you want?

---

Original Answer

The HorizontalOptions and VerticalOptions properties have no effect on children of an AbsoluteLayout.

So if you want to put the label vertically and horizontally centered, you should use AbsoluteLayoutFlags. Consider the following code:

        AbsoluteLayout.SetLayoutFlags(newLabel, Microsoft.Maui.Layouts.AbsoluteLayoutFlags.PositionProportional);
        AbsoluteLayout.SetLayoutBounds(newLabel, new Rect(0.5,0.5, 640, 300));

Hope it helps!