当前位置：首页 > uni-app

uniapp让图片居中

2026-02-06 10:26:40uni-app

图片水平居中

在 uniapp 中让图片水平居中，可以通过 CSS 样式实现。将图片包裹在一个容器中，并设置容器的 text-align 属性为 center。

<template>
  <view class="container">
    <image src="/static/example.jpg" class="centered-image"></image>
  </view>
</template>

<style>
.container {
  text-align: center;
}
.centered-image {
  display: inline-block;
}
</style>

图片垂直居中

如果需要垂直居中，可以使用 Flex 布局。设置父容器为 Flex 容器，并调整对齐方式。

<template>
  <view class="container">
    <image src="/static/example.jpg" class="centered-image"></image>
  </view>
</template>

<style>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 确保容器有足够高度 */
}
</style>

图片水平垂直居中

结合水平和垂直居中的方法，可以通过 Flex 布局一步实现。

<template>
  <view class="container">
    <image src="/static/example.jpg" class="centered-image"></image>
  </view>
</template>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

使用绝对定位居中

如果需要在特定场景中使用绝对定位，可以通过 position: absolute 结合 transform 实现。

<template>
  <view class="container">
    <image src="/static/example.jpg" class="abs-centered-image"></image>
  </view>
</template>

<style>
.container {
  position: relative;
  height: 100vh;
}
.abs-centered-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

响应式图片居中

对于需要适应不同屏幕尺寸的图片，可以设置图片的最大宽度并保持居中。

uniapp让图片居中

<template>
  <view class="container">
    <image src="/static/example.jpg" mode="widthFix" class="responsive-image"></image>
  </view>
</template>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.responsive-image {
  max-width: 100%;
}
</style>

以上方法可以根据实际需求选择使用，确保图片在 uniapp 中完美居中显示。