【大前端】【Android】【iOS】iOS 和 Android 常见“垂直居中”

下面把方式做一个对照式总结 ，从原生布局 / 代码 / 常见坑三个层面讲清楚，方便在双端开发或对齐 UI 规范时快速查。

一、iOS 垂直居中

1️⃣ Auto Layout（推荐 & 现代做法）

UIView 垂直居中到父视图

复制代码

[childView.centerYAnchor constraintEqualToAnchor:parentView.centerYAnchor].active = YES;

👉 等价于 Android 的 layout_centerVertical="true"

同时水平 + 垂直居中

复制代码

[childView.centerXAnchor constraintEqualToAnchor:parentView.centerXAnchor].active = YES;
[childView.centerYAnchor constraintEqualToAnchor:parentView.centerYAnchor].active = YES;

Interface Builder（Storyboard / XIB）

选中 View
Add Alignments
勾选：
- ✅ Vertically in Container

2️⃣ Frame / 手动计算（老项目常见）

复制代码

childView.center = CGPointMake(
    parentView.bounds.size.width / 2.0,
    parentView.bounds.size.height / 2.0
);

⚠️ 注意：

必须在 viewDidLayoutSubviews
或 layoutSubviews 中执行

3️⃣ UILabel / UIButton 文本垂直居中

UILabel（默认就是垂直居中）

复制代码

label.textAlignment = NSTextAlignmentCenter;

如果需要自定义文本区域（少见）：

复制代码

label.contentMode = UIViewContentModeCenter;

4️⃣ iOS 常见坑

问题	原因
看起来没居中	SafeArea 没考虑
横屏错位	frame 写死
动态高度不准	Auto Layout 未更新

👉 正确姿势：

复制代码

[childView.centerYAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.centerYAnchor].active = YES;

二、Android 垂直居中

1️⃣ RelativeLayout（老项目最常见）

复制代码

android:layout_centerVertical="true"

完整示例：

复制代码

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"/>

2️⃣ LinearLayout（内容居中）

垂直方向居中子 View

复制代码

android:gravity="center_vertical"

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:orientation="vertical">

📌 gravity 是"控制子 View"

3️⃣ ConstraintLayout（推荐 & 现代）

复制代码

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

即自动垂直居中：

复制代码

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"/>

👉 等价 iOS 的 centerYAnchor

4️⃣ FrameLayout（最简单）

复制代码

android:layout_gravity="center_vertical"

或直接：

复制代码

android:layout_gravity="center"

5️⃣ Android 文本垂直居中

复制代码

android:gravity="center_vertical"

或：

复制代码

android:gravity="center"

⚠️ 区分：

gravity → 内容（文字）
layout_gravity → View 在父容器的位置

三、iOS vs Android 垂直居中对照表

场景	iOS	Android
View 垂直居中	centerYAnchor	layout_centerVertical
容器内居中	contentMode / AutoLayout	gravity
文本垂直居中	UILabel 默认	TextView gravity
现代推荐	Auto Layout	ConstraintLayout
安全区域	safeAreaLayoutGuide	fitsSystemWindows / insets

四、双端开发统一思维模型

垂直居中 = 上下等距约束

iOS：
top = parent.top + x
bottom = parent.bottom - x
Android（ConstraintLayout）：
Top → Parent
Bottom → Parent

五、实战常问点

✅ Android 为什么 ConstraintLayout 可以自动居中？

→ 因为 Top / Bottom 形成双向约束，bias 默认为 0.5

✅ iOS SafeArea 会影响居中吗？

→ 会，尤其是刘海屏 / 底部 Home Indicator