Column容器中的组件同时实现纵向和横向居中

在鸿蒙开发中，要让Column容器中的组件同时实现纵向和横向居中，可以通过Column自身的布局属性来设置：

纵向居中：Column默认就是纵向排列，通过alignment属性设置垂直方向居中

1. 横向居中：通过justifyContent属性设置水平方向居中

示例代码如下：

Column() {

// 子组件1

Text("第一个组件")

.fontSize(18)

// 子组件2

Text("第二个组件")

.fontSize(18)

.margin({ top: 10 })

}

// 设置横向（水平）居中

.justifyContent(FlexAlign.Center)

// 设置纵向（垂直）居中

.alignment(HorizontalAlign.Center)

// 让Column占满父容器，这样居中才会明显

.width('100%')

.height('100%')

关键属性说明：

• justifyContent(FlexAlign.Center)：设置水平方向居中（子组件在 Column 的水平中心线上）

• alignment(HorizontalAlign.Center)：设置垂直方向居中（子组件在 Column 的垂直中心线上）

• 通常需要给Column设置width('100%')和height('100%')使其占满父容器，否则可能看不到居中效果

这样设置后，Column中的所有子组件就会在容器内同时实现横向和纵向居中了。