HarmonyOS 鸿蒙Next如何实现相对位置或者绝对定位的水平垂直居中

发布于 1周前 作者 eggper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next如何实现相对位置或者绝对定位的水平垂直居中

如何实现相对位置或者绝对定位的水平垂直居中，类似web中的代码如下 

{ position: absolute; left:0; right:0; top: 50%; transform: translateY(-50%); margin: 0 auto; } 

常用的场景是 一个容器，包含一个图片和一段文字，文字水平垂直居中 

Column() { Image() Text() }

Harmonyos Next教程
2 回复 
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  build() {
    Column() {
      Stack({ alignContent: Alignment.Center }) {
        Image($r('app.media.startIcon')).width(80).height(80)
        Text('96')
          .zIndex(1)
          .fontColor(Color.Red)
          .textAlign(TextAlign.Center)
          .fontSize(44)
      }.width('100%').height(120).width(120)
      .borderStyle(BorderStyle.Dashed)
      .borderWidth(4)
      .borderColor(0xAFEEEE)
    }
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .width('100%')
    .height('100%')
  }
}

在HarmonyOS鸿蒙Next系统中，实现相对位置或绝对定位的水平垂直居中，可以通过以下方式实现：

  1. 绝对定位法：

    • 使用布局组件的absolute属性，设置子组件的left和top属性为相对父组件的百分比值，同时结合width和height设置子组件的大小。
    • 通过left: 50% - (子组件宽度的一半)和top: 50% - (子组件高度的一半)的公式，可以实现子组件在父组件中的水平垂直居中。

  2. Flexbox布局法：

    • 将父组件的flex-direction设置为column或row（根据实际需求），并启用justify-content: center和align-items: center属性。
    • 这种方法不需要计算具体的偏移量，只需设置父组件的flex属性，子组件即可自动在父组件中水平和垂直居中。

  3. Grid布局法：

    • 使用Grid布局，将父组件设置为网格容器，并设置适当的网格行和列。
    • 通过grid-template-rows、grid-template-columns以及grid-area等属性，可以实现子组件在指定网格中的水平和垂直居中。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部