如何将加载YouTube iFrame的WebView居中于LinearLayout（或屏幕）？

我明白你现在的困扰——WebView里的YouTube视频总是顶在顶部，怎么都没法居中，试过各种方法都没效果。别着急，咱们从布局、WebView设置、HTML样式三个维度调整，应该就能搞定问题了：

1. 调整XML布局，让WebView在父容器中居中 #

你当前的webviewlayoutVDOInternal这个LinearLayout没设置居中属性，导致WebView默认顶在顶部。修改这个布局，给它加上android:gravity="center"，同时去掉WebView自身的android:gravity="center"（这个属性是控制WebView内部子元素的，对加载的HTML内容没用）：

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="fill_parent" 
    android:id="@+id/webviewlayoutVDOInternal"
    android:gravity="center"> <!-- 新增：让子元素居中 -->
    <WebView 
        android:id="@+id/webviewVideo" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_marginLeft="0dp" 
        android:layout_marginRight="0dp" />
</LinearLayout>

如果希望视频在不同屏幕上保持合适宽度，可以把WebView的layout_width设为match_parent，再加上android:maxWidth="800dp"（数值可根据需求调整），这样视频不会过宽，同时依然居中。

2. 调整WebView视口设置，适配HTML内容 #

你之前把UseWideViewPort设为false，这会导致WebView无法适配HTML的视口宽度，容易出现内容偏移。改成true，配合LoadWithOverviewMode=true，让WebView正确缩放内容：

webView.Settings.JavaScriptEnabled = true;
webView.Settings.LoadWithOverviewMode = true;
webView.Settings.UseWideViewPort = true; // 改为true，适配宽视口
webView.SetBackgroundColor(Android.Graphics.Color.Black);
webView.LoadDataWithBaseURL("https://.", IFRAME_CONTENT, "text/html", "UTF-8", null);

3. 优化HTML内容，让iFrame在WebView内部居中 #

直接加载iFrame可能因为没有容器包裹，导致无法居中。给iFrame套一个居中容器，用CSS Flexbox实现全屏居中，同时保持YouTube视频标准的16:9比例：

把你的IFRAME_CONTENT改成下面的结构：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 让body占满WebView高度，用Flexbox居中内容 */
        body { 
            margin: 0; 
            padding: 0; 
            width: 100%; 
            height: 100%; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            background-color: black;
        }
        /* 容器控制视频最大宽度，保持响应式 */
        .video-wrap {
            width: 100%;
            max-width: 800px; /* 可根据需求调整 */
        }
        /* 让iFrame自适应容器宽度，保持16:9比例 */
        iframe {
            width: 100%;
            height: auto;
            aspect-ratio: 16/9;
            border: none;
        }
    </style>
</head>
<body>
    <div class="video-wrap">
        <!-- 替换成你的YouTube iFrame代码 -->
        <iframe src="https://www.youtube.com/embed/你的视频ID" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</body>
</html>

这样调整后，WebView会先把自身居中在屏幕里，内部的HTML通过Flexbox让视频在WebView视口中居中，同时保持合适比例，顶部空白的问题应该就能解决了。

内容的提问来源于stack exchange，提问作者Ali