How to horizontally center an item in a ColumnLayout in a StackLayout?

[mjs225]

I want to center the Rectangle horizontally in the Window. Layout.alignment: Qt.AlignHCenter works until the StackLayout is added. How to horizontally center the Rectangle? Thanks very much.

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Window {
	height: 300
	width: 240
	visible: true

	StackLayout {
		anchors.fill: parent
		ColumnLayout {
			Layout.fillWidth: true
			Layout.fillHeight: true
			Rectangle {
				color: "red"
				Layout.preferredWidth: 100
				Layout.preferredHeight: 50
				Layout.alignment: Qt.AlignHCenter
			}
			// other items
		}
		// other items
	}
}

[mjs225]

It turns out wrapping the child Layout in an Item does the trick. Don't know why and whether this is the best solution

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Window {
    height: 300
    width: 240
    visible: true

    StackLayout {
        anchors.fill: parent
        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true
            ColumnLayout {
                anchors.fill: parent
                Rectangle {
                    color: "red"
                    Layout.preferredWidth: 100
                    Layout.preferredHeight: 50
                    Layout.alignment: Qt.AlignHCenter // Center within ColumnLayout
                }
                // other items
            }
        }
        // other items
    }
}